web-dev-qa-db-fra.com

Rendu image base64 dans vue.js

Quelqu'un peut-il m'aider à afficher une image codée en Base 64 à l’aide de vue.js?

En gros, j'ai un objet image:

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

Je sais qu'en HTML pur, je peux faire quelque chose comme:

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

En vue, j'ai essayé ce qui suit:

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

Voici mon composant de vue complète:

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

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

Quelqu'un peut aider?

Merci d'avance!

imagevue.jsbase64
5
Trung Tran

Dans vue.js ça va ressembler à:

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

J'ai eu le même problème.

Changement

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

à

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

devrait résoudre le problème.

0
Vincenzo