Nuxt URL.createObjectURL 不是函数

Posted 2023-03-07

【中文标题】Nuxt URL.createObjectURL 不是函数

【英文标题】：Nuxt URL.createObjectURL is not a function

【发布时间】：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

【参考方案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"> ✅