Render base64 image in vue.js

Question

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!

Smudge

Did you set img to be a property of the vue instance? Or are you just trying to reference a plain javascript object? – Proverbial

it's part of my vue instance @Proverbial – Smudge

Can you show how you've set that in your vue instance? – Proverbial

sure - just updated my question. note - the img object comes in as a prop – Smudge

And how are you passing img to the component? BTW this is working for me jsfiddle.net/1eddx72k – Proverbial

ah - my encodedImage is in the raw format w/o the data:image/png;base64, ... i'll just add that in manually. Thanks for your help!! – Smudge

Answer 1

In vue.js, it'll look like:

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

Fucus

This worked for me with slight change - <img v-bind:src="imageBytes" /> – Avignon

Answer 2

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,
    };
  },
};

Amaya

Even though it's recommended, it's not practical in every situation. I created a Vue app, integrated it with a CRM and my images did not show (status 404) because of incorrect paths.The data-uri way solved my problem. – Finagle

Answer 3

Have had the same issue.

Change

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

to

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

should solve the problem.

Dandle

Answer 4

<img :src="'data:image/png;base64,' + item.ItemImageData ">

Here, item.ItemImageData contains base64 image string. As my image is png hence I used "data:image/png". Change it accordingly.

Polyzoic

Answer 5

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>

Finagle

Answer 6

For large images, putting the image content into different js files works for me.

--- myImage.js content ---

export default {
  getContent() {
    return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABCkAAAKkCAY ...";
  }
}

--- index.vue content ---

import myImage from "../assets/base64/myImage"

export default {
  name: "IndexPage",
  data() {
    return {
      myImageBase64: myImage.getContent(),
  }
}

--- template content ---

<template>
<div class="home-dashboard">
   <img :src="myImageBase64" alt="" class="img-fluid rounded-md shadow-md">
</div>
</template>

Coracle