Nuxt URL.createObjectURL is not a function

Question

Hi guys I'm working with Nuxt

And I have image saved on server as blob that I would like to display on client

My Component looks like this:

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

Bu I keep getting following error:

URL.createObjectURL is not a function

Does anyone know what could be the problem ?

In what mode are you using nuxt ? And does the error happen on the browser or server ? — Pierre Said
– Pierre Said, Commented Mar 11, 2021 at 0:04
Related GH issues with info: github.com/nuxt/nuxt.js/issues/4914 — TheAlexLichter
– TheAlexLichter, Commented Mar 11, 2021 at 7:36

tony19 · Accepted Answer · 2021-03-11 01:18:11Z

1

This error likely occurs on the server side, as Node does not support URL.createObjectURL(). Instead, you could create a data URL for your image in this format:

data:image/png;BASE64_OF_IMG_BLOB

where BASE64_OF_IMG_BLOB is computed from:

Node: blob.toString('base64')
Browser: btoa(blob)

imgSrc would then look like this:

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

Note the :src binding should be updated to remove the curly brackets:

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

answered Mar 11, 2021 at 1:18

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nuxt URL.createObjectURL is not a function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related