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}}" />

这是我的完整视频组件：

<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

遇到了同样的问题。

更改

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

到

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

应该解决问题。

Answer 3

要在vue组件中显示任何data 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 4

这是可重复使用的图像组件：

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

在vue.js中渲染base64图像

4 个答案: