Render base64 image in vue.js

user_1547174 0
Viewed 54045

Can someone help me display a Base 64 encoded image using vue.js?

Basically I have an image object:

img = {
  encodedImage: '/9x/4AFQSkZJRgABAXAASABIAAD...'
}

I know that in pure HTML i can do something like:

<div>
    <p>Taken from wikpedia</p>
    <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

In vue, i have tried the following:

<img :src="img.encodedImage" />
<img v-bind:src="img.encodedImage" />
<img :src="{{img.encodedImage}}" />
<img v-bind:src="{{img.encodedImage}}" />

Here's my full vue component:

<template>
  <div>
    <img :src="img.encodedImage">
  </div>
</template>
<script>

export default {
  props: [ 'img' ]
}
</script>

Can someone help?

Thanks in advance!

vue.js base64 image
4 Answers

In vue.js, it'll look like:

<img v-bind:src="'data:image/jpeg;base64,'+imageBytes" />
user_75821010

To display any data URI in a vue component you can do something like this:

Data URI way

<template>
  <img :src="`data:image/png;base64,${img.encodedImage}`" />
</template>

export default {
  props: ['img'],
};

Recommended way

<template>
  <img :src="image" />
</template>

import image from '@/assets/image.png';

export default {
  data() {
    return {
      image,
    };
  },
};
user_14496240

Have had the same issue.

Change

img = {  encodedImage: '/9x/4AFQSkZJRgABAXAASABIAAD...'}

to

img = {  encodedImage: 'data:image/jpg;base64,/9x/4AFQSkZJRgABAXAASABIAAD...'}

should solve the problem.

user_32110740

Here's a reusable image component:

<template>
  <img v-bind:src="'data:image/gif;base64,'+ imageAsBase64" />
</template>

<script>
import fs from "fs";

export default {
  data() {
    return {
      imageAsBase64: ""
    };
  },
  mounted() {
    this.imageAsBase64 = fs.readFileSync("./assets/progress-bar.gif", "base64");
  }
};
</script>

Then use in your components:

<template>
  <div>
    <DataImage></DataImage>
  </div>
</template>

<script>
import DataImage from "./DataImage.vue";

export default {
  components: {
    DataImage
  }
}
</script>
user_9583980
Related