Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Images returning 404 on using local images in Nuxt 3

See original GitHub issue

Using nuxt-img with local images and they dont seem to work when the pages are prerendered. They throw a 404 error. Screenshot2022-10-29 at 21 23 51@2x

The images are displayed locally in dev environment.

Reproduction - https://github.com/fayazara/nuxt-image-issue-reproduction

Deployed on Vercel - https://nuxt-image-issue-reproduction.vercel.app/ Deployed on Netlify - https://wondrous-medovik-574c06.netlify.app/

A remote image URL work btw. Happens only with local static images.

Build command was set to yarn generate

Issue Analytics

State:
Created a year ago
Reactions:13
Comments:6 (1 by maintainers)

Top GitHub Comments

3reactions

dosstxcommented, Nov 22, 2022

I believe I am seeing this issue too. It works fine when I do npm run dev but once I deploy to produciton, the local images are 404.

IPX Error: Error: File not found (/public/images/avatar-placeholder.svg)

3reactions

fayazaracommented, Nov 7, 2022

Anybody found a temporary fix to this yet?

Top Results From Across the Web

vue.js - image not found in assets when using @error in Nuxt

Based on this you need to use require because images inside assets directory are considered as modules : @error="$event.target.src ...

How to load dynamic images in Vue and Nuxt with ease

Importing images from the assets folder when the path is static is not that difficult in both frameworks, Vue and Nuxt.js.

nuxt-img

Uses built-in provider to optimize local and remote images; Converts src to provider optimized URLs; Automatically resizes images based on width and height ......

Nuxt npm run generate (404 assets not found) - Vue Forum

All my files in the assets folder show as “404 not found”. In my components I reference the images like ~/assets/img1.jpg .

Static Asset Handling - Vite

If using the Vue plugin, asset references in Vue SFC templates are automatically converted into imports. Common image, media, and font filetypes are...