nuxt / nuxt/image

IPX: File not found when using assets directory

Open
#1,006 58 comments 26 reactions 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'm using Nuxt 3.7.3, Nuxt image 1.0.0-rc.2

In a component, providing image from assets directory as src prop of does not render image, I see "404 IPX: File not found" error in JS console.
Same image with <img> tag works correctly.

This works:
<img src="~/assets/img/banners/front-page-banner.png" alt="Banner" />

This does not work:
<NuxtImg src="~/assets/img/banners/front-page-banner.png" alt="Banner" />

Import also does not work. This does not work:

<script lang="ts" setup>
import banner from '~/assets/img/banners/front-page-banner.png';
</script>
<template>
  <NuxtImg :src="banner" alt="Banner" />
</template>

According documentation https://image.nuxt.com/get-started/configuration#dir I've added assets directory to nuxt.config:
dir: 'assets/img'

Now image is rendered normally using it this way:
<NuxtImg src="banners/front-page-banner.png" alt="Banner" />

But only on local development server, after building and deploying it image is not rendered and same error appears in JS console.

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

Start by reproducing the Nuxt 3.7.3 and Nuxt Image 1.0.0-rc.2 behavior with the assets directory and the dir: 'assets/img' configuration. Compare local development with the built and deployed application, using the NuxtImg examples in the report; done means configured assets render successfully after deployment without the IPX 404.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend
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.