When attempting to render a base64 image, it is currently returning as empty

After extracting an image from Microsoft graphQL, I converted it to base64 before saving it in vuex.

Buffer.from(image).toString('base64')

Now, when trying to display the image in my component using the following code:

<img class="shadow avatar border-white" :src="`data:image/jpg;base64,${this.$store.state.user.profilePhoto}`"/>

I experimented with different approaches like adding charset-utf-8 and testing various image formats such as png and jpeg.

The CSS class applied simply rounds off the edges of the image and adds a subtle shadow effect.

However, currently, all I see is a transparent circle without the image being displayed. Any suggestions on a correct way to encode the image for rendering?

Answer №1

Here are some suggestions for improvement:

  1. Avoid adding unnecessary elements like this in your templates as it may not be needed ($store should suffice).
  2. It seems that the value you are trying to access may not be present in the store when the template is compiled. In order to make it reactive, consider using a computed property instead of directly accessing the variable. This way, Vue will attach a setter and getter, allowing the property to update reactively at runtime:

    <img :sry="imgSrc" />
    
    
    computed: {
      profileImg() {
        return this.$store.state.user && this.$store.state.user.profilePhoto;
      },
    
      imgSrc() {
        return 'data:image/jpg;base64,${this.profileImg}`;
      }
    }
    

Edit: Encode Image data to dataURL

If you need to convert image data into a dataURL to use as the src value for image tags, you can achieve this by utilizing an HTMLCanvasElement:

function imageToDataURL(image) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  context.drawImage(image, image.width, image.height);
  return = canvas.toDataURL('image/png');
}

This function assumes that you already have a loaded image. If you need to load your image from a URI, ensure to wrap it within an image.onload function.

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

Using jQuery to submit a form and update values

I am currently working with a datatable that includes a detail column with an edit button. Upon clicking the edit button, I pass the ID as a parameter and fetch all the values associated with that ID to display in a form. However, when I edit the values an ...

Assign a value to an element based on a specific attribute value

I'm working with the following element <input type="text" size="4" name="nightly" value="-1"> My goal is to update the value to 15.9 specifically when name="nightly" Here's what I've attempted so far: document.getElementsByName(&ap ...

What is the best way to retrieve data input from my select dropdown?

I have a select menu generated from a database and I want to display the value of the selected option in an input field. Currently, my code only shows the value of the first option. How can I modify it to display all selected values? Thank you. <?php ...

What strategies can I use to make my div content more adaptable to different screen sizes and

Currently, in my project, I have implemented a layout using the top nav menu (purple part) and the left menu (pink part) as shown in the image. However, I am facing an issue where, upon deleting some content from the view, the pink menu on the left extends ...

JavaScript: Finding the current month and all subsequent months until the end of the year

Is there a way in vanilla JavaScript to retrieve the current month and the following 12 months? For instance, if today is April 2022, I would like the output to be: April 2022 May 2022 June 2022 July 2022 August 2022 September 2022 October 2022 November 2 ...

Sending data from middleware to a function in Node.js is a crucial step in the communication

While working with express, I have a requirement to develop a middleware for validation purposes. The code snippet I have looks like this: Code: app.use('/upload', formData) app.use('/upload', function firstUpload(req, res, next) { ...

Issue: The program is unable to access the 'length' properties as it is undefined while working with vue-lottie

I'm attempting to implement a Lottie animation in my Vue project using vue-lottie. I have been following the example code provided in the repository, but upon running the code, I encountered the following error message in the console: https://i.sstat ...

TypeError: Unable to access the 'items' property of a null value

I am currently working on a program and I am facing an issue where I need to access something from the first component in the second component. Can anyone provide assistance on how to properly construct this? Below is a snippet of my code: ...

Internet Explorer 11 Ajax problem

Once again, Internet Explorer is causing some issues. I have a file called validation.php where the values from a text box are sent for validation. The text box value is read and then a result indicates whether it is valid or not. This functionality work ...

Having trouble with Vue JS not showing the footer on your website?

I recently set up vue cli and encountered an issue where my navbar component shows up fine, but the footer component does not display properly. When I navigate to other CMS pages, both the navbar and footer appear together without any text displayed in bet ...

Having trouble with updating a document in Mongoose - encountering an issue where the save function is not recognized

I'm currently working on a project where I am practicing CRUD operations with Node, MongoDb, and Mongoose for database management. However, I have encountered a roadblock when attempting to update my data. Let me share the code snippet in question: / ...

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 ...

Frontend update: Changing the display format for dates

Received from the backend is an array of objects (leavedays)- var leavedays = [{"_id":"62d544ae9f22d","season":2022,"name":"LEAVEDAY1","dateFrom":"2022- 07-26T00:00:00.000Z","date ...

Sending arguments to Angular UI router template

My angular ui router is changing states/views as: $stateProvider .state({ name: 'home', url: '/', template: '<home-view></home-view>', }) Is it possible to ...

Is there a way to deactivate other dropdown options?

To simplify the selection process, I would like to disable the options for "Province", "City", and "Barangay". When the user clicks on the "Region" field, the corresponding "Province" options should be enabled. Then, when a specific province is selected, t ...

experimenting with an API by utilizing the OPTIONS method and encountering a 405 error on

Recently, I started working with vue and nuxt to connect them to an API created with fastapi. However, whenever I attempt to register a new account using the Vue form, I encounter this error. 127.0.0.1:52137 - "OPTIONS /user HTTP/1.1" 405 Metho ...

Expanding the ul height with animation when the page loads

Hi there, I am a beginner looking to create a ul list that increases its height with animation when the page loads. Can this be achieved with CSS? Any assistance would be greatly appreciated. <ul> <li><a href="/">title 1</a>& ...

Displaying or concealing HTML elements using AngularJS while a modal is open

Looking for a way to display a loading spinner icon on my page when a user triggers a button that opens a modal, and then have the spinner disappear once the modal is open and its content has loaded. Currently, I've managed to make the spinner show up ...

Appears as though time is slipping away during date conversions

I seem to be experiencing a strange issue where I lose a day when transitioning between MySQL and my JavaScript code, and I can't seem to figure out why. When I insert a date into the database (for example, 10/14/12), it appears as 10/13/12 in the dat ...

What could be causing BeautifulSoup to overlook certain elements on the page?

For practice, I am in the process of developing an Instagram web scraper. To handle dynamic webpages, I have opted to utilize Selenium. The webpage is loaded using: driver.execute_script("return document.documentElement.outerHTML") (Using this javascript ...