Links to public assets break after `nuxi generate`
Definitely 'baby's first Nuxt build' issue.
In my app I reference public assets like
<img src="/images/me.jpg">
and they work.
After build the assets are no longer found, but changing them to <img src="images/me.jpg"> fixes it (notice missing leading/)
What should I do?3 Replies
Hi @romanek. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
In Nuxt, when referencing files in the public directory, you should use a leading slash in your src attribute, like this:
This tells Nuxt (and the browser) to look for the file at the root of your site, which is where files from the public directory are served. This is the recommended and documented approach for referencing static assets in Nuxt, both in development and after building your app. For example, if you have a file at public/images/me.jpg, it should be accessible at /images/me.jpg in your app, regardless of whether you're in dev or production mode Assets in Nuxt 4.x Directory Structure: public.
If you find that assets are only working without the leading slash (e.g., images/me.jpg), this suggests there may be an issue with how your app is being served or deployed after build. The correct and portable way is to always use the leading slash.
Additionally, a recent GitHub issue confirms that the correct usage is:
GitHub Issue: Images Not displayed in V4
If you are still experiencing issues after build, double-check that:
- Your assets are indeed in the public directory.
- You are not using a base path or router base that changes the root URL (if you are, you may need to use the runtime config to prepend the correct base).
- Your deployment setup serves the public directory at the root.
But in summary: the recommended and portable way is to use a leading slash, like /images/me.jpg. If this does not work after build, there may be a misconfiguration in your deployment or build process.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@509551337294266389> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
hm, if i preview the static build using
npx serve .output/public then the public assets are all good, but if i just open .output/public/index.html in a browser the assets are broken