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!

Answer 1

In vue.js, it'll look like:

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