Using Prismic Helper "asImageSrc" in Nuxt2 Vue2

Developing with Prismic
,
1

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

Can anyone help me ?

3

Hello @ricou

Thanks for reaching out to us.

The asImageSrc helper is meant to extract the src value of a Prismic image field, and, optionally, to apply transformations to it by leveraging features from imgix CDN.
So it should be without url. Are you able to access prismicH inside backgroundImage. Did you print console?

Best,
Priyanka

4

Thank you @Priyanka
I hadn't paid attention
The easyest way is to replace the string in the url like that

imageNonCompressee(url) {
  return url.replace('?auto=compress,format', '')
},
1 Like