image.dir option in nuxt.config.ts results in 404 on production

Hey all!

We were running into some issues where we implemented this module and suddenly our build does break and the images cannot be displayed. The browser gets a 404 when requesting the images. In production we are running nuxt inside a docker containter.

While trying to reproduce this issue with a clean repo i discovered that the image.dir option (docs) is resulting in this behavior.

Versions:

@nuxt/image: 1.3.0
nuxt: 3.10.1
node: v20.4.0

I also tried your playground, same problem. See the playground fork here: https://stackblitz.com/edit/github-fxrrqo-tfd5wv

So clean repo with:

1. npx nuxi@latest init nuxt-image-test
2. npm install @nuxt/image
3. Added @nuxt/image to modules in nuxt.config.ts
4. Add Image (e.g. TestPhoto.webp) with NuxtImg-Tag to app.vue
5. Set src-attribute to src="/TestPhoto.webp"
6. Run npm run dev and see working site
7. Run npm run build and npm run preview to see correct site

So add image.dir as module options:

1. Add dir: "public/img"
2. Move Image to a new folder public/img
3. Set src of NuxtImg-Tag to src="TestPhoto.webp"
4. Run npm run dev and see working site
5. Run npm run build and npm run preview to see broken site

While discovering this, I removed the image.dir option in our project and the production build does not fail anymore.

Reproduce this in a clean Nuxt project using @nuxt/image 1.3.0: configure image.dir as public/img, move TestPhoto.webp there, then compare npm run dev with npm run build and npm run preview. Use the linked playground fork as an additional reproduction. Done means the configured image path works in the production preview without a 404.