nuxt-modules / prismic

Easily connect your Nuxt.js application to your content hosted on Prismic

Home Page:https://prismic.nuxtjs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

using Prismic Helper "asImageSrc" in my Vue Component

kaboume opened this issue · comments

commented

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.

commented

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?

commented

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