nuxt / nuxt/image

Images inside <template [tag]> are not generated during nuxt generate, but work in development mode

Open
#1,608 7 comments 1 reaction 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.