Images inside <template [tag]> are not generated during nuxt generate, but work in development mode
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
I have encountered a problem with the @nuxt/image module when using it inside a <template> tag. Images are not generated correctly when running nuxt generate, although they work fine in development mode ( nuxt dev ).
<UPopover :popper="{ placement: 'bottom-end' }">
<UButton icon="bi:globe-americas"/>
<template #panel>
<NuxtImg
src="/img/example.webp"
width="25"
format="webp"
densities="x1 x2"
/>
</template>
</UPopover>
When running nuxt dev - the image will be displayed correctly.
When I run nuxt generate and try to open the page, the image is not generated and the browser shows a 404 error http://localhost:3000/_ipx/f_webp/img/example.webp
<template #panel>
Expected behavior: The image should be generated and available during static generation, similar to how it works in development mode.
The image is not generated during static site generation and the page shows a 404 error when trying to load the image. However, the image works fine when running nuxt dev.
package.json
"dependencies": {
"@nuxt/ui": "^2.19.2",
"@nuxtjs/i18n": "^9.0.0",
"axios": "^1.7.7",
"lodash": "^4.17.21",
"nuxt": "^3.14.159",
"nuxt-zod-i18n": "^1.10.0",
"vue": "latest",
"vue-router": "latest",
"zod": "^3.23.8"
},
"devDependencies": {
"@nuxt/image": "^1.8.1",
"nuxt-aos": "^1.2.5",
"nuxt-swiper": "^2.0.0",
"sass-embedded": "^1.81.0"
}
Additional information:
This issue seems to be related specifically to the use of NuxtImg inside a tag with a named slot ( #panel in this case).
The images work fine in development mode, but are not generated during static build.
I have verified that the images are correctly placed.
When I remove the slot ( without #panel), the image is generated correctly during static build. But adding #panel or any other gives an error.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue with NuxtImg inside the named #panel template, comparing nuxt dev with nuxt generate using the package versions shown. Then trace static generation and image handling for the generated _ipx URL; done means the image is available after static generation without a 404.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100