Link field inside Group adds duplicated ?auto=format,compress?auto=compress,format to url in Nuxt3

Hello, i'm having some issues when using a link field inside a group (i'm using nuxt3) (edit) It only happens if i choose link to media and add an image.

  • If i use prismic.asLink(project?.data?.featured_media[0].main_media) it returns (...).jpg?auto=format,compress?auto=compress,format

  • If i use prismic.asImageSrc(project?.data?.featured_media[0].main_media, { auto: ['format'] }) it returns (...).jpg?auto=format

  • If i use project?.data?.featured_media[0].main_media.url it returns (...).jpg?auto=format,compress?auto=compress,format

But in other link field outside a group, it only returns de ?auto=format blabla if i use the prismic.asImageSrc helper. But if i use asLink or .url it doesn't add that parameters to the url

I want to use a link field over an image field so i can choose to use an image inside prismic library or an external link to my cloudflare bucket for videos.

Thanks in advance

Hi @alexlopezleon ,

Thanks for reaching out and for the detailed breakdown of your issue — we really appreciate it.

What you’re experiencing with the duplicated ?auto=format,compress parameters in media linkswhen using a Link field inside a Group is a known issue that’s been observed by multiple developers in the Prismic community. This typically occurs when a Link field is used to “Link to Media”, particularly for images, and can result in malformed URLs when rendered using .url or prismic.asLink().

It’s been reported and discussed on the Prismic community forum here:

At the moment, the recommended workaround is to:

  1. Use prismic.asImageSrc(linkField, { auto: ['format'] }) only if you’re sure the link is to an image.
  2. For mixed media (image or external video), access .url directly and sanitize it, for example:
const rawUrl = project?.data?.featured_media?.[0]?.main_media?.url ?? '';
const cleanedUrl = rawUrl.replace(/\?auto=[^?]+(\?auto=[^?]+)?/, '?auto=format');

We understand how this can be frustrating, and if you’re encountering this issue in production, we recommend adding a short validation or cleaning step like the above to ensure correct rendering.

Let us know if you’d like help writing a utility function to handle this automatically in your project.