时间戳

首页 > 解决方案 > 渲染 base64 图像，当前返回为空白

javascript - 渲染 base64 图像，当前返回为空白

问题描述

在将字符串存储到 vuex 之前，我从 Microsoft graphQL 中提取了一个图像并应用了以下内容。

Buffer.from(image).toString('base64')

在我的组件内部，我试图以下列方式渲染图像

<img class="shadow avatar border-white" :src="`data:image/jpg;base64,${this.$store.state.user.profilePhoto}`"/>

我尝试将 charset-utf-8 添加到组合中，并添加了一些变体，包括不同的图像类型，包括 png 和 jpeg。

CSS 类只是将图像四舍五入并添加一点阴影。

目前我得到一个透明的圆圈，没有找到图像。

在尝试渲染图像之前，是否有另一种方法需要对图像进行编码？

标签： javascriptvue.jsbase64

解决方案

您可以改进以下几点：

  1. 您不必添加this模板（$store就足够了）。

  2. 我怀疑编译模板时您的商店中不存在您的值。您访问变量的方式不会使其反应。这意味着如果它在第一次评估时不是正确的值，它以后不会改变。相反，您应该使用计算属性访问您的数据 - 这样 vue 将附加一个 setter 和 getter，这允许属性在运行时进行响应式更新：

    <img :sry="imgSrc" />


computed: {
  profileImg() {
    return this.$store.state.user && this.$store.state.user.profilePhoto;
  },

  imgSrc() {
    return 'data:image/jpg;base64,${this.profileImg}`;
  }
}

编辑：将图像数据编码为 dataURL

如果要将图像数据转换为可用作src图像标签值的 dataURL，则可以使用HTMLCanvasElement：

function imageToDataURL(image) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  context.drawImage(image, image.width, image.height);
  return = canvas.toDataURL('image/png');
}

此函数假定您已经有一个加载的图像。如果您需要从 URI 加载图像，请将其包装在 image.onload 函数中。

推荐阅读