0

I've pulled an image from Microsoft graphQL and applied the following before storing the string in vuex.

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

Inside my component I'm trying to render the image in the following way

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

I've tried adding the charset-utf-8 into the mix and a few variations including different image types including png and jpeg.

The CSS class simply rounds the image and adds a bit of shadow.

At the moment I'm getting a transparent circle and no image to be found.

Is there another way I need to encode the image before trying to render it?

Mtlj1991
  • 187
  • 2
  • 4
  • 13
  • I don't know if it will make any difference, but the proper mime type for JPEG images is `image/jpeg`. – whydoubt Oct 02 '19 at 13:57
  • I overlooked that you already tried `image/jpeg`, but it is what the value should be, assuming that the output of `Buffer.from(image)` is in JPEG format. – whydoubt Oct 02 '19 at 14:11

1 Answers1

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.

MarcRo
  • 2,434
  • 1
  • 9
  • 24
  • Still no luck I'm afraid, still displaying an blank image. I have implemented your way of using the computed property though, much cleaner way of doing it. Thanks! – Mtlj1991 Oct 02 '19 at 12:25
  • @Mtlj1991 Can you check whether the src tag is correctly populated in your rendered HTML? – MarcRo Oct 02 '19 at 12:54
  • I can confirm that it is, when I pulled the link and tested directly in the browser it just displayed small white square instead of the required image.https://imgur.com/a/DTmKYcg – Mtlj1991 Oct 02 '19 at 13:08
  • @Mtlj1991 Then it should be confirmed that the vue side of things works as intendet - however, the image-data is not correctly encoded. You can encode your image data using a canvas element, I will edit my answer in a second. – MarcRo Oct 02 '19 at 13:24