Nuxt Prismic-Image Help! Cannot remove image compression with imgix-params

Developing with Prismic
1

Hello I tried removing compression according to how the documentation specifies: Image - Documentation - Prismic

In my vue file:

      <prismic-image
        class="[prisImg] hidden md:block w-full my-0 max-w-hd mx-auto"
        v-if="person.data.poster_image"
        :field="person.data.poster_image"
        :imgix-params="{ auto: false }"
      />

Outputs:

<img imgix-params="[object Object]" src="https://images.prismic.io/archivetherapy/7c662779-2d45-42bd-8459-f79c85117ced_Logan+Johnson+-+min.jpg?auto=compress,format" alt="" class="[prisImg] hidden md:block w-full my-0 max-w-hd mx-auto">

It is still adding the auto=compress,format url parameters!

I'm not sure why the imgix-params is even showing up in the rendered html. If anyone know the answer please let me know. Thanks!

6

Hello @thehatcherylabs,

I tested it and got the same result; I will inform our team of this and get back to you when I have news

Thanks,
Racheal.

11

Hello @thehatcherylabs,

I got feedback from our team on this issue.

Vue 2 (@prismicio/vue v2) / Nuxt 2 (@nuxtjs/prismic v1)

  • imgix-params prop is not supported and won't be; you have to use imgix-url-builder directly or strip the part you don't want from the URL manually.

Vue 3 (@prismicio/vue v3/v4) / Nuxt 3 (@nuxtjs/prismic v3)

  • imgix-params prop works as expected
  • Compression can be removed using the component like this: <PrismicImage :field="field" :imgix-prarams="{ auto: ['format'] }" /> (string format is not valid, it has to be an array of them)
  • Automatic optimization can be removed using the component like this: <PrismicImage :field="field" :imgix-prarams="{ auto: undefined }" />.

And here's an example of how to use imgix-url-builder directly for Vue 2 & Nuxt 2.

  1. Install @prismicio/helpers (installing the latest client would cause compatibility issues, I think)
    npm install --save @prismicio/helpers

  2. Use it in code to resolve image src

<template>
  <img :src="asImageSrc(doc.data.image, { auto: undefined })" alt="doc.data.image.alt" />
</template>

<script>
import { asImageSrc } from "@prismicio/helpers";

export default {
  data() {
    return { asImageSrc }
  }
};
</script>

Let me know if this helps :slight_smile:

Thanks,
Racheal.

12

Thank you, Racheal. I will try this out today!

13

Hi Racheal, could you specify which version to install?

14

Hello @thehatcherylabs

Rachael is out of the office today. I, Priyanka, am assisting you here.

You can install the latest version of @prismicio/helpers with the following command:

npm i @prismicio/helpers

Please find more detail here: @prismicio/helpers - npm

Here is a technical reference article: @prismicio/helpers Technical Reference - Documentation - Prismic

Let us know how it goes.

Thanks,
Priyanka

Thanks,
Priyanka

1 Like
15

Thank you, Priyanka but as Racheal mentions, the latest version of primicio/helpers does not work with Nuxt 2. asImageSrc is undefined when using it.

Through trial and error I eventually found that v2.3.1 works.

1 Like