`/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.