show the array as an image using the mean stack technology, which includes node.js and Angular

My persona has an attribute retrieved from MongoDB known as "faceDetection.photo", which is an array of values. Here is a snippet of the code:

persona.faceDetection.photo=[255,216,255,224,0,16,74,70,73,70,0,1,1,1,0,1....etc]
var encodedData = window.btoa(persona.faceDetection.photo);
persona.faceDetection.photo=encodedData;

I am trying to display this image using AngularJS like this:

 <img data-ng-src="data:image/jpeg;base64,{{newPersona.faceDetection.photo}}" /img>

However, nothing is being displayed. Is there a simpler way to achieve this?

PD: I apologize for my English and coding skills, I'm very new to this.
javascriptangularjsimagemongodbdisplay

Answer №1

Providing a response

<image src data:image/jpeg;base64
necessitates base64 encoding.

Therefore, the persona.faceDetection.photo object should be in base64 format.

You can attempt something similar to this:

    var myUint8 = new Uint8Array(persona.faceDetection.photo)
    var myBase64 = window.btoa(String.fromCharCode.apply(null, myUint8)); 

    persona.faceDetection.photo=myBase64 ;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind generating auth.js:65 Uncaught (in promise) TypeError: Unable to access property 'data' of undefined?

Encountering a login issue in my Django application while using Axios and React-Redux. The problem arises when providing incorrect login credentials, resulting in the LOGIN_FAIL action. However, when providing the correct information, the LOGIN_SUCCESS act ...

javascriptdjangoecmascript-6react-reduxaxios

Select an item from the options available

Looking to automatically select a specific item from a combobox upon clicking a button on my webpage. The page includes both PHP and JavaScript code for this functionality. Currently, I have a JavaScript function triggered by the "onclick" event of the bu ...

phpjavascripthtml

Utilizing Restangular to refine search results with filters

I need help troubleshooting an issue with my Restangular query. Despite trying various methods, I am unable to retrieve filtered data successfully. Here are the different approaches I have attempted: $scope.welcomes = Restangular.all("projects").getList({ ...

javascriptnode.jsangularjsmongodbrestangular

What could be causing the issue with this specific multi-field key not functioning properly in Mongoid?

Recently, I made an update to my model by including the following: key :name, :random_number In addition, I have implemented a callback like this: before_create :create_random_number Surprisingly, the random_number attribute is not being appended to th ...

ruby-on-railsrubymongodbmongoid

Obtain custom parameter data from a string

Searching for custom parameter values within a string is necessary. For instance, given the following string: aaa[111] bbb[222] ccc[333] ddd[444] I am looking to extract the value 111 associated with the parameter aaa, and so on... The specific paramete ...

javascriptjqueryregex

Issue with Tabulator: The top and bottom calculations do not shift position when a column is toggled. Seeking a solution to toggle a column and refresh the table without losing the current

My main objective is to toggle the visibility of toggles while maintaining consistent formatting. However, I currently face an issue where using a filter achieves this but results in losing the current scroll position of the tabulator, which is not accepta ...

javascriptjquerytabulator

Is there a way to create a JavaScript script that automatically updates a webpage for all users simultaneously?

I have developed a web application that enables users to modify content using JavaScript. Currently, these changes are only visible on the local browser and do not involve AJAX. However, I am wondering how I can ensure that these DOM alterations are refle ...

javascriptajaxhtml

Issue: Trouble with ajax form functionality

I'm a beginner in ajax, js, and php. Recently, I set up a simple contact form. <form id="contact-form" method="post" action="process.php" role="form"> <div class="messages"></div> <div class="form-group"> <l ...

javascriptphpjqueryajax

Error: Node.js exceeds maximum call stack size while inspecting an objectlogging or debugging

After defining a class as shown below, I encountered an error stating RangeError: Maximum call stack size exceeded when attempting to review the properties of the Object. var Individual = (function () { function Individual(name, age) { this.na ...

javascriptnode.js

Display an image using a modal window and Ajax XMLHttpRequest

I was tasked with creating a button that can load various types of content (text, images, videos, etc) into a modal popup window using Ajax without any frameworks. So far, I've been successful with text but have run into issues with loading images. De ...

javascripthtmlajax

What steps should I take to fix the error that arises when I am using the mysql module?

When attempting to connect my local database using the node module, I encountered the following error message: Client does not support authentication protocol requested by server; consider upgrading MySQL client next is my configuration: const mysql = r ...

javascriptmysqlnode.js

Utilizing dynamic routes and incorporating additional search parameters within the URL structure in NextJS has never

Is there a way to use router.push(url); to redirect a user with a URL structure like this: [:lang]/something/[...dynamicRouteParams]?searchParam=true. The problem I'm facing is that the user ends up being redirected to a page with a URL structure lik ...

javascriptroutesnext.js

Problem with Inserting Blank Data into MySQL Database Using Ionic Framework and PHP

I am currently working on developing a mobile hybrid app using the Ionic framework. However, I have encountered an issue where blank data is being inserted into the database when trying to insert new data. I am struggling to identify what mistake I might b ...

jqueryangularjsapiionic-framework

What is the method for verifying PHP information using jQuery AJAX?

On my PHP page, I have an else statement that filters data from a SQL database based on user input. Below is some pseudo code: NextPage.php //Include database configuration file include('../dbConfig.php'); if(isset($_POST['pageno']) ...

javascriptphpjqueryajaxpagination

Dealing with ETIMEDOUT error in Express.js

My Node.js/Express.js application interfaces with an FTP server, but crashes when the server is offline due to handling issues with the ETIMEDOUT exception. I am using the jsftp module for FTP. Here's the problematic part of my code: router.post("/" ...

javascriptnode.jsexpress

Mastering JQuery: Techniques for Managing Events Across Numerous Elements

My view page utilizes Ajax and JQuery to retrieve data from Codeigniter's controller, then presents it in HTML format. Below is the code for the Ajax post: $(document).ready(function(){ var fileId = 0; var wrapper = $("#preference"); ...

javascriptphpjqueryajaxcodeigniter

Triggering a keyboard *ENTER* event on an Input in Javascript/React by clicking a button is a common query among developers

I am facing a challenge with an Input element that only displays results when I press Enter on the keyboard. The element is part of a third-party extension, so my control over it is limited. My goal is to trigger the ENTER event for the Input when a button ...

javascriptreactjs

Only execute the NPM script if there is a staged JavaScript file

How can I ensure that an NPM script runs only when a JS file is staged, specifically after a pre-commit git hook (using Husky)? The scripts in my package.json are as follows: "scripts": { ... "test": "jest", "precommit": "npm test", ... }, ...

javascriptnode.jsgitnpmpre-commit-hook

What is the best method to retrieve the window object in XUL?

I'm attempting to assign an onLoad event to the current webpage through a Firefox extension. My approach involves utilizing the gBrowser object, although I am uncertain if this is the most optimal method. The goal is to establish an onLoad event for t ...

javascriptfirefoxfirefox-addonxul

JavaScript Regular Expression that identifies commas enclosed within quotation marks

I am attempting to parse a text-based log file in the following format: type: 'click', category: 'REFRESH_DOOR', desc: 'clicked refresh from door 0124', site: 'mysite', pathname: '/load_areas/all/doors&apos ...

javascriptjsonnode.jsregex