<img> Image is gone after hot reload
Hey, im using a simple <img> tag
But after my site hot reloads, or im going back via the "Last page" button, the image is not there anymore and im getting a router error:
WARN [Vue Router warn]: No match found for location with path "/&&/images/fedox2.jpg"
6 Replies
Hi @Fedox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The issue you're experiencing is likely due to how static assets are served in Nuxt. In Nuxt 3 and 4, static files such as images should be placed in the public directory, not assets. The correct path for your image should be relative to the public directory, and you should reference it as
- Place static images in
/images/fedox2.jpg in your <img> tag.
However, the error message you see—No match found for location with path "/&&/images/fedox2.jpg"—suggests that the router is trying to resolve the image path as a route, which usually happens if the image is not found in the public directory or if the path is incorrect. This can also occur if you use a path like ~/assets/ or a relative path that doesn't resolve correctly after a hot reload or navigation event.
How to fix:
1. Move your image to the public/images/ directory in your Nuxt project (not assets/).
2. Reference it with an absolute path in your template:
3. Do not use ~/assets/ or relative paths for static images in the template. The assets directory is for files processed by the build tool (like SCSS or images imported in JS), while public is for files served as-is.
This approach is confirmed by multiple sources, which state that static files should be placed in the public directory and referenced with a root-relative path. If you use the assets directory, the image will not be available at runtime as a static file, leading to 404 errors or router warnings after hot reloads or navigation events Nuxt 3 I frame pdf shows 404 after building but works in dev mode, How to change computed image src property to another one based on the current page loaded, using Vue 3 and Nuxt?, Why are my images not displaying properly on my web page?.
Summary:- Place static images in
public/.
- Reference them with /images/filename.jpg.
- Avoid using assets/ for images you want to reference directly in templates.
If you follow these steps and still encounter issues, double-check that the image exists in the correct location and that your browser cache is cleared.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1121449150140141648> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
This bot sucks
Dear @kapa.ai, it's in my public folder.
Let me check the knowledge base for you again. One moment! :books:
----------------------
Thank you for clarifying that your image is in the
When linking to static files in the
If the path changes to something like
Sometimes, after hot reloads, old build artifacts or cached files can cause unexpected behavior. Try stopping your dev server, clearing
The knowledge sources do not mention a specific Nuxt bug that would cause this behavior if the image is correctly placed in
- Ensure you are using a plain
Public Directory Usage ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
public folder.
Given that, referencing it as <img src="/images/fedox2.jpg" /> is correct. However, the error message you’re seeing—No match found for location with path "/&&/images/fedox2.jpg"—suggests that Vue Router is trying to handle the image path as a route, which should not happen for static files in public/.
Possible causes and solutions based on the knowledge sources:
1. Router Handling of Static Files:When linking to static files in the
/public directory, you should ensure that you are not using Nuxt's internal routing (e.g., <NuxtLink>) for these files. If you use <NuxtLink> for static assets, you must add the external prop to bypass Vue Router and ensure the link is treated as a direct file reference:
For <img>, this is not necessary, but if you are dynamically generating image paths or using programmatic navigation, make sure you are not accidentally routing to the image path as a page route instead of a static file NuxtLink documentation.
2. Path Issues After Hot Reload or Navigation:If the path changes to something like
/&&/images/fedox2.jpg, this could indicate a bug in how the path is being set or a state issue after navigation. Double-check that the src attribute is always set to /images/fedox2.jpg and not being dynamically altered by your code or by a plugin.
3. Browser Cache or Build Artifacts:Sometimes, after hot reloads, old build artifacts or cached files can cause unexpected behavior. Try stopping your dev server, clearing
.nuxt and .output directories, and restarting the server.
4. No Known Nuxt Bug for This Pattern:The knowledge sources do not mention a specific Nuxt bug that would cause this behavior if the image is correctly placed in
public/ and referenced with an absolute path.
Summary:- Ensure you are using a plain
<img src="/images/fedox2.jpg" /> tag.
- Do not use <NuxtLink> for static files unless you add the external prop.
- Check that your code does not dynamically alter the src path.
- Try a clean rebuild if the issue persists.
If you are still experiencing the issue after these checks, the knowledge sources do not provide further details for this specific scenario. If possible, provide more context or code snippets around how the image path is set or manipulated in your app for more targeted help.
Handling Static File and Cross-App LinksPublic Directory Usage ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@1121449150140141648> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
wtf why should i use NuxtLink for an image 😭