在vue.js中渲染base64图像

hof1towb 于 2022-12-04 发布在 Vue.js

关注(0)|答案(5)|浏览(362)

有人能帮我使用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>

有人能帮忙吗？
提前感谢！

vue.js

来源：https://stackoverflow.com/questions/46492356/render-base64-image-in-vue-js

5条答案

按热度按时间

oaxa6hgo1#

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

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

赞(0）回复(0）举报 2022-12-04

pn9klfpd2#

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

数据URI方式

第一个

推荐方式

第一次

赞(0）回复(0）举报 2022-12-04

toe950273#

都有同样的问题。
变更

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

至

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

应该能解决问题。

赞(0）回复(0）举报 2022-12-04

fkaflof64#

下面是一个可重用的图像组件：

<template>
  <img v-bind:src="'data:image/gif;base64,'+ imageAsBase64" />
</template>

<script>
import fs from "fs";

export default {
  data() {
    return {
      imageAsBase64: ""
    };
  },
  mounted() {
    this.imageAsBase64 = fs.readFileSync("./assets/progress-bar.gif", "base64");
  }
};
</script>

然后在组件中使用：

<template>
  <div>
    <DataImage></DataImage>
  </div>
</template>

<script>
import DataImage from "./DataImage.vue";

export default {
  components: {
    DataImage
  }
}
</script>

赞(0）回复(0）举报 2022-12-04

gab6jxml5#

<img :src="'data:image/png;base64,' + item.ItemImageData ">
这里，itemImageData包含base64图像字符串。因为我的图像是png，所以我使用了“data：image/png"。请相应地更改它。

赞(0）回复(0）举报 2022-12-04