Retrieve image original URL

Developing with Prismic
1

Hi,

I’m currently trying to create Nuxt static site using Prismic.

I would like to cache/download the Prismic image when I run npm run generate as to prevent trafic from counting againt my CDN quota. This is possible with NuxtImage and the ipx provider by doing like so.

Here is my nuxt.config.ts

image: {
    provider: 'ipx',
    domains: ['static.swapcard.com', 'images.prismic.io', 'interface-qc.cdn.prismic.io'],
    quality: 70,
    format: ['webp'],
},

And how NuxtImage is used inside my component:
<NuxtImg :src="speaker.img.url" :alt="speaker.img.alt" width="322" height="375" />

So this original URL: src="https://images.prismic.io/interface-qc/Z9jSKjiBA97GikvL_profile_picture-1-.png?auto=format,compress&rect=27,0,322,375&w=322&h=375&q=70"

Will tranformed and cached to this:
src="/_ipx/q_70&s_322x375/https:/images.prismic.io/interface-qc/Z9jSKjiBA97GikvL_profile_picture-1-.png%3Fauto=format,compress%26rect=27,0,322,375%26w=322%26h=375"

The problem is that ipx doesn't like that there are params inside the prismic URL, and this will crash the static site generator.
These params are not needed, because nuxt will do it's own resizing and convertion.
So my question is, is there a way to retreive the original URL, without the query params (?auto=format,compress&rect=27,0,322,375&w=322&h=375&q=70) ?

The API response for the image field is like so and only provide the transformed url, not the original image url.

{
    "dimensions": { "width": 322, "height": 375 },
    "alt": null,
    "copyright": null,
    "url": "https://images.prismic.io/interface-qc/Z9jSKjiBA97GikvL_profile_picture-1-.png?auto=format,  compress&rect=27,0,322,375&w=322&h=375",
    "id": "Z9jSKjiBA97GikvL",
    "edit": { "x": 27, "y": 0, "zoom": 1, "background": "transparent" }
}

My current and ugly workaroud is to replace :src="speaker.img.url" for :src="speaker.img.url.split('?')[0]" .

This means that Nuxt image receive src="https://images.prismic.io/interface-qc/Z9jSKjiBA97GikvL_profile_picture-1-.png" and genrate src="/_ipx/q_70&s_322x375/https:/images.prismic.io/interface-qc/Z9jSKjiBA97GikvL_profile_picture-1-.png" instead

2

Hey @sebastian.d,

Thanks for raising this.

Short answer: no, Prismic doesn’t currently expose a separate “original URL without imgix params” for image fields — the only URL you get from the Content API is the one with ?auto=...,rect=...,w=...,h=... etc.

Prismic serves all images through Imgix and, by design:

  • Every image URL coming from the Content API has at least auto=compress,format on it.
  • If an editor crops or resizes in the UI, extra params like rect, w, h, q are added to that same URL.

There isn’t an additional field in the Content API; only the transformed URL is exposed.

So what you’re doing (stripping the query string before passing it to NuxtImg) is the correct workaround for your use case. You can centralize the logic in a helper and call it in the needed component if that's not what you were already doing.