Nuxt URL.createObjectURL 不是函数答案

【问题标题】：Nuxt URL.createObjectURL is not a functionNuxt URL.createObjectURL 不是函数
【发布时间】：2021-06-08 23:26:42
【问题描述】：

大家好，我正在与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>

但我不断收到以下错误：

URL.createObjectURL 不是函数

有谁知道可能是什么问题？

【问题讨论】：

你在什么 mode 使用 nuxt ？错误是否发生在浏览器或服务器上？
与信息相关的 GH 问题：github.com/nuxt/nuxt.js/issues/4914

标签： vue.js nuxt.js

【解决方案1】：

此错误可能发生在服务器端，因为 Node 不支持URL.createObjectURL()。相反，您可以以这种格式创建data URL for your image：

data:image/png;BASE64_OF_IMG_BLOB

BASE64_OF_IMG_BLOB 的计算依据：

节点： blob.toString('base64')
浏览器： 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 绑定应该被更新以移除大括号：

<img :src="{imgSrc}"> ❌ brackets unnecessary
<img :src="imgSrc"> ✅

【讨论】：