Render base64 Bild in vue.js

Question

Kann mir jemand helfen, ein Base 64 kodiertes Bild mit vue.js anzuzeigen?

Im Prinzip habe ich ein Bildobjekt:

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

Ich weiß, dass in reinen HTML i wie etwas tun können:

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

In vue, habe ich versucht, die folgenden:

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

Hier ist meine vollständige vue-Komponente:

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

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

Kann jemand helfen?

Vielen Dank im Voraus!

Answer 1

Hatten das gleiche Problem.

ändern

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

zu

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

sollte das Problem lösen.

Answer 2

In vue.js sieht es werden wie:

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