NUXTURL。createObjectURL不是一个函数

Question

嗨，伙计们，我和Nuxt一起工作

我在服务器上以blob的形式保存了图像，我想在客户端上显示它

我的组件如下所示：

<template>
  <div class="product-page">
    <div class="product-image">
      <img data-image="black" :src="{imgSrc}" alt class="active" />
    </div>
    <div class="product-info">
      <h2>{{ product.name }}</h2>
      <h3>{{ product.price }}</h3>
      <div class="description">
        <p>The purposes of bonsai are primarily contemplation for the viewer, and the pleasant exercise of effort and ingenuity for the grower.</p>
        <p>By contrast with other plant cultivation practices, bonsai is not intended for production of food or for medicine. Instead, bonsai practice focuses on long-term cultivation and shaping of one or more small trees growing in a container.</p>
      </div>
    </div>
  </div>
</template>


<script>

export default {
  props: {
    product: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    imgSrc() {
      const src = URL.createObjectURL(this.product.images.data);
      return src;
    }
  }
};
</script>

但是我一直得到以下错误：

网址。createObjectURL不是一个函数

有人知道问题出在哪里吗？

Answer 1

此错误可能发生在服务器端，因为Node不支持URL. createObjectURL（）。相反，您可以为您的图像创建以下格式的数据URL：

data:image/png;BASE64_OF_IMG_BLOB

其中BASE64_OF_IMG_BLOB是从：

• 节点：blob.to字符串（'bas64'）
• 浏览器：btoa（blob）

imgSrc将如下所示：

export default {
  computed: {
    imgSrc() {
      const isServer = typeof window === 'undefined'
      const blob = this.product.images.data
      const base64 = isServer ? blob.toString('base64') : btoa(blob)
      return 'data:image/png;base64,' + base64
    }
  }
}

注意： src绑定应该更新以去掉大括号：

html prettyprint-override"><img :src="{imgSrc}"> ❌ brackets unnecessary
<img :src="imgSrc"> ✅