[Vuejs]-Rendering a base64 image, currently comes back as blank

by

0👍

There are a couple things you could improve:

  1. You don’t have to add this in your templates ($store is enough).

  2. I suspect your the value is not present in your store when the template is compiled. The way you access the variable will not make it reactive. That means if it is not the correct value when it is first evaluated, it will not change later. Instead you should access your data with a computed property – this way vue will attach a setter and getter, which allows the property to reactively update at 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 want to convert image data into a dataURL which you can use as src value for image tags you can do it with 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 you already have a loaded image. If you need to load your image from an URI, wrap it in an image.onload function.

Leave a comment