nuxt-modules / prismic

Easily connect your Nuxt.js application to your content hosted on Prismic
https://prismic.nuxtjs.org
MIT License
245 stars 48 forks source link

using Prismic Helper "asImageSrc" in my Vue Component #178

Closed kaboume closed 1 year ago

kaboume commented 1 year ago

Hi, I wan't to disable the compression of the Prismic Images in my Vue Component. So I found in the Prismic documentation that :

prismicH.asImageSrc(document.data.example_image, { auto: undefined })
// https://images.prismic.io/repo/image.png

So I did :

<template>
  <v-container
    fluid
    class="imageBackground"
    :style="{
      backgroundImage:
        'url(' +
        prismicH.asImageSrc(slice.primary.imagefond.url, { auto: undefined }) +
        ')',
    }"
  >
    <div class="text-center">
      ...
    </div>
  </v-container>
</template>

<script>
import * as prismicH from '@prismicio/helpers'

export default {
  name: 'HomeBlocASlice',
...

And I have this error :

TypeError Cannot read properties of undefined (reading 'asImageSrc')

I'm using Nuxt2 for information.

lihbr commented 1 year ago

Hey there, can you try with prismicH.asImageSrc(slice.primary.imagefond, { auto: undefined }) instead? You should not need to access .url directly

Also, can you double-check that you're running @prismicio/helpers@2?

lihbr commented 1 year ago

Closing as stale, feel free to reopen if you want to keep investigating your question ☺️