IPX gives 404 in production

[GlennBergmans]

I'm trying to optimize images from remote sources (e.g. unsplash) with the ipx provider. It works fine in npm run dev. However when serving a static generated version, the images give 404. I suspect due to illegal filenames.

Compare this:

<img :src="url" />
<NuxtImg :src="url" />

When url is an unsplash image, the following output is created when running npm run generate:

<img src="https://images.unsplash.com/photo-1518133910546-b6c2fb7d79e3?crop=entropy&amp;cs=srgb&amp;fm=jpg&amp;ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwyfHx0ZXN0fGVufDB8fHx8MTcwNDQ3NjEyN3ww&amp;ixlib=rb-4.0.3&amp;q=85?auto=compress,format" class="gallery__img" sizes="100vw mobile:480 tablet:50vw fullhd:670px" data-v-61bb7bdc>
<img src="/_ipx/_/https://images.unsplash.com/photo-1518133910546-b6c2fb7d79e3%3Fcrop=entropy%26cs=srgb%26fm=jpg%26ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwyfHx0ZXN0fGVufDB8fHx8MTcwNDQ3NjEyN3ww%26ixlib=rb-4.0.3%26q=85%3Fauto=compress,format" onerror="this.setAttribute(&#39;data-error&#39;, 1)" data-nuxt-img srcset="/_ipx/_/https://images.unsplash.com/photo-1518133910546-b6c2fb7d79e3%3Fcrop=entropy%26cs=srgb%26fm=jpg%26ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwyfHx0ZXN0fGVufDB8fHx8MTcwNDQ3NjEyN3ww%26ixlib=rb-4.0.3%26q=85%3Fauto=compress,format 1x, /_ipx/_/https://images.unsplash.com/photo-1518133910546-b6c2fb7d79e3%3Fcrop=entropy%26cs=srgb%26fm=jpg%26ixid=M3wzMzc0NjN8MHwxfHNlYXJjaHwyfHx0ZXN0fGVufDB8fHx8MTcwNDQ3NjEyN3ww%26ixlib=rb-4.0.3%26q=85%3Fauto=compress,format 2x" class="gallery__img" data-v-61bb7bdc>

When serving with npm run start, the NuxtImg version gives a 404. The file is generated, but I suspect the filename is not valid due to the // or one of the special characters (%, =, , etc).

I've found a workaround by using aliases (alias: { 'unsplash': 'https://images.unsplash.com' }) and stripping all query parameters, however it's not ideal:

<script lang="ts" setup>
const cleanUrl = (src: string) => {
  // Remove query parameters
  src = src.substring(0, src.indexOf('?'));

  // Replace aliasses
  const img = useImage();
  for (const key in img.options.alias) {
    src = src.replace(img.options.alias[key], key)
  }

  return src;
}
</script>

<template>
  <NuxtImg :src="cleanUrl(src.url)" />
</template>

Am I doing something wrong/did I misconfigure, or did I stumble upon a bug. Is there some way to apply the workaround globally on all <NuxtImg>?

[TimGuendel]

I have the same problem 🤔

[github-actions[bot]]

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](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)

[GlennBergmans]

I think this is a minimal example: https://stackblitz.com/edit/github-im5e92-hvcadv?file=app.vue

I load the same Unsplash image 3 times:

1. Normal <img>
2. <NuxtImg> with unmodified path
3. <NuxtImg> with fixed path

When running in Stackblitz using npm run dev, you'll see the image appear 3 times. However, when downloading the repo, and running using npm run generate && node node_modules/nuxt/bin/nuxt.mjs start, you see the second case failing.

It might be OS specific: I'm running on MacOS 14.3 with case-insensitive APFS filesystem (default).

[krftcz]

For reproduction you can run build (npm run build) in your playground and then serve it (node .output/server/index.mjs). Images are not generated.