在vue.js中渲染base64图像

Question

有人可以帮我用vue.js显示Base 64编码的图像吗？

基本上我有一个图像对象:

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

我知道在纯HTML中我可以做类似的事情:

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

在vue中,我尝试了以下内容:

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

这是我的完整vue组件:

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

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

有人可以帮忙吗？

提前致谢!

Answer 1

在vue.js中它看起来像:

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

Answer 2

要在 vue 组件中显示任何数据 URI，您可以执行以下操作：

数据URI方式

<template>
  <img :src="`data:image/png;base64,${img.encodedImage}`" />
</template>

export default {
  props: ['img'],
};

推荐方式

<template>
  <img :src="image" />
</template>

import image from '@/assets/image.png';

export default {
  data() {
    return {
      image,
    };
  },
};

Answer 3

遇到过同样的问题。

改变

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

到

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

应该可以解决问题。