IPX gives 404 in production

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>?

Start by reproducing the difference between npm run generate/npm run start and npm run dev using the remote Unsplash URL, then trace how the ipx provider handles the generated NuxtImg path and its encoded query parameters. Done means statically generated remote images load successfully in production without requiring aliases or manually stripped query parameters.