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

有人可以帮忙吗？

提前致谢！

原文由 Trung Tran 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 vue.js 中，它看起来像：

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

原文由 ejdrian313 发布，翻译遵循 CC BY-SA 4.0 许可协议