Remove auto=compress from all image urls

Developing with Prismic
1

Hi here!

For images from Prismic, i'm using

<PrismicImage :field="image" />

I need to remove the auto=compress parameter from all the images from prismic.

Is there a way to disable this option somewhere, and keep the <PrismicImage /> ?

Thanks a lot!

3

Hello @Vincent07

Thanks for reaching out to us.

My colleague in the following thread has answered this question:
colleague

Let us know if you have any further questions.

Thanks,
Priyanka

4

Hi Priyanka!

I'm not sure to understand...

He says:

You need to modify the URL of the image.

In my slice model.json, i can modify url:

{
  "id": "image_plein_ecran",
  "type": "SharedSlice",
  "name": "ImagePleinEcran",
  "description": "ImagePleinEcran",
  "variations": [
    {
      "id": "default",
      "name": "Default",
      "docURL": "...",
      "version": "sktwi1xtmkfgx8626",
      "description": "ImagePleinEcran",
      "primary": {
        "image": {
          "type": "Image",
          "config": {
            "label": "Image",
            "constraint": {
              "width": 1660
            },
            "thumbnails": []
          }
        }
      },
      "items": {},
      "imageUrl": "https://images.prismic.io/slice-machine/621a5ec4-0387-4bc5-9860-2dd46cbc07cd_default_ss.png?auto=compress,format"
    }
  ]
}

But even if you remove this parameter in the imageUrl value, the url called is still with this parameter

image
image1245×56 5.36 KB

5

Hello @Vincent07

You need to change the code where you are templating the image field.
<PrismicImage :field="image" auto: "undefined" />

Thanks,
Priyanka

6

Oh it's perfect !
Thanks a lot!

7

You are welcome, @Vincent07. I am happy to help. Feel free to reach out to us if you have any questions. Thanks.

1 Like
9

Hum... i don't understand... :sweat_smile:

<PrismicImage
   :field="page.data.logo"
   auto="undefined"
 />

The render:

<img 
   auto="undefined" 
   src="https://images.prismic.io/publicom/ac90e187-de34-4279-9ce9-4624e18a4354_sky-explorer-logotype.webp?auto=compress,format&amp;rect=2,0,544,314&amp;w=260&amp;h=150"
>

Am I crazy? :sweat_smile:

11

Hi @priyanka, i need your help, thanks for your time :smiley:

Adding parameter auto="undefined" doesn't working :frowning:

12

Hello @Vincent07,

There is a mistake in the code that I shared with you.

By default, both compress and format are enabled for the auto parameter, and each one can be configured independently.

// To remove only `compress`:
<PrismicImage field={myField} imgixParams={{ auto: 'format' }} />

// To remove only `format`:
<PrismicImage field={myField} imgixParams={{ auto: 'compress' }} />

// To remove both:
<PrismicImage field={myField} imgixParams={{ auto: undefined }} />

I believe it solves the issue.

Thanks,
Priyanka

1 Like
13

Hi @Priyanka!

Thanks ;)

I have now this code, for Nuxt.js

<PrismicImage
          :field="slice.primary.image_right"
          :imgix-params="{ auto:undefined }"
        />

But i always have the compression :(

<img src="https://images.prismic.io/publicom/5ab9ab3f-778f-40d4-8dbe-79d3853049c3_agence-1.png?auto=compress,format&amp;rect=0,1,542,331&amp;w=540&amp;h=330" alt="" imgix-params="[object Object]">
14

What do you mean by this:

15

On the html render, i still have the ?auto=compress,format on the image url.

16

That's strange. It should work. Can you share your code?