`/cdn-cgi/image/` breaks dynamic `/routes/media` URLs

[mrkaashee]

Hi Nuxt Image team,

I’m using Nuxt Image with the Cloudflare provider and have a dynamic route serving images as blobs: /routes/media/:filename. My config works without quality:

$production: {
  image: {
    format: ['webp', 'avif'],
    provider: 'cloudflare',
    cloudflare: { baseURL: '/' },
  }
}

When I add quality:

$production: {
  image: {
    format: ['webp', 'avif'],
    provider: 'cloudflare',
    cloudflare: { baseURL: '/' },
    quality: 80,
  }
}

Nuxt automatically appends /cdn-cgi/image/ to generate URLs (as noted in the docs):

Note: /cdn-cgi/image/ will be automatically appended for generating URLs.

This breaks my URLs because my dynamic route /routes/media/:filename cannot be fetched correctly via /cdn-cgi/image/....

Question:

How can I use quality (or other optimization options) with a dynamic Nuxt route like /routes/media? Is there a way to make Cloudflare optimization work with dynamic blob routes, or do images need to be served from public/?

Thanks!

[DamianGlowala]

Hi! Can you add a bit more about the dynamic route serving images as blobs? Is it a feature of Cloudflare or Nuxt? Can you add expected URL vs actual URL (invalid for your use case) + ideally snippets of corresponding NuxtImg/NuxtPicture usage?

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a template for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/image/tree/main/example

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[github-actions]

This issue was closed because it was open for 7 days without a reproduction.

[mrkaashee]

Hi Nuxt Image team,

Apologies for the delayed response earlier — I wasn’t able to reply in time. I’d like to request reopening this issue as I can now provide clear reproduction steps.

Reproduction Steps:

1. Create a Nuxt project and install @nuxt/image.
2. Configure Nuxt Image with the Cloudflare provider:

image: { 
  provider: 'cloudflare',
  cloudflare: { baseURL: '/' }, 
}

3. Create a dynamic route that serves images, e.g.:

/media/:filename

(returning an image/blob response)

4. Use the image in a component (e.g. <NuxtImg src="/media/test.jpg" />) → works correctly.
5. Now add quality:

image: { 
  provider: 'cloudflare', 
  cloudflare: { baseURL: '/' }, 
  quality: 80, 
}

Issue

Once quality is added, Nuxt Image automatically prepends /cdn-cgi/image/ to the URL, resulting in:

/cdn-cgi/image/.../media/test.jpg

This breaks the dynamic route, as /media/:filename cannot be resolved correctly through /cdn-cgi/image/.

Question

Is there a way to:

1. Use Cloudflare image optimization (e.g. quality) with dynamic routes like /media/:filename, or
2. Prevent /cdn-cgi/image/ from being applied to such routes?

Thanks again, and I’d really appreciate if this issue could be reopened 🙏