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!

Did you set img to be a property of the vue instance? Or are you just trying to reference a plain javascript object? — thanksd
– thanksd, Commented Sep 29, 2017 at 15:39
sure - just updated my question. note - the img object comes in as a prop — Trung Tran
– Trung Tran, Commented Sep 29, 2017 at 15:45
And how are you passing img to the component? BTW this is working for me jsfiddle.net/1eddx72k — thanksd
– thanksd, Commented Sep 29, 2017 at 15:51

Kick Buttowski · Accepted Answer · 2020-02-20 02:09:31Z

49

In vue.js, it'll look like:

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

edited Feb 20, 2020 at 2:09

Kick Buttowski

6,74713 gold badges39 silver badges61 bronze badges

answered Jan 11, 2018 at 22:32

ejdrian313

7047 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Krish Over a year ago

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

A1rPun · Accepted Answer · 2019-06-18 14:28:47Z

19

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

answered Jun 18, 2019 at 14:28

A1rPun

17k8 gold badges60 silver badges93 bronze badges

1 Comment

tno2007 Over a year ago

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.

Vincenzo · Accepted Answer · 2018-01-10 23:27:07Z

3

Have had the same issue.

Change

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

to

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

should solve the problem.

answered Jan 10, 2018 at 23:27

Vincenzo

1,15811 silver badges18 bronze badges

Comments

ManojMokavoor · Accepted Answer · 2022-11-30 09:36:14Z

1

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

answered Nov 30, 2022 at 9:36

ManojMokavoor

235 bronze badges

Comments

tno2007 · Accepted Answer · 2020-02-14 03:12:46Z

0

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>

edited Feb 14, 2020 at 3:12

answered Feb 14, 2020 at 3:02

tno2007

2,20829 silver badges19 bronze badges

Comments

Ersin Güvenç · Accepted Answer · 2024-06-08 09:52:49Z

0

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>

answered Jun 8, 2024 at 9:52

Ersin Güvenç

3117 silver badges21 bronze badges

Collectives™ on Stack Overflow

Render base64 image in vue.js

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related