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

[cx-networks-gmbh]

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.