咨询：Nuxt项目app.html中图片引用出现404错误的解决办法
Hey there! Let's figure out why those images are throwing 404s in your app.html modal. The key issue here is that app.html is Nuxt's root template file, which doesn't get processed by Webpack the same way your Vue components do. That means the ~/assets/... alias you're used to in components won't work here—Nuxt can't resolve that path correctly in this context.
Here are a few straightforward fixes to get your images loading properly:
1. Use the static directory (simplest approach)
Nuxt treats the static folder as a place for assets that need to be served directly without Webpack processing. Just move your 3 PNG files from assets/images/ to static/images/. Then update your image src in app.html to use an absolute path:
<img src="/images/chrome.png" alt="Chrome browser"> <img src="/images/firefox.png" alt="Firefox browser"> <img src="/images/edge.png" alt="Edge browser">
When you build or run your Nuxt app, everything in static gets copied straight to the root of your dist folder, so these paths will resolve perfectly.
2. Use Nuxt's injected BASE_URL variable (if you want to keep images in assets)
If you prefer leaving the images in assets/images/, you can use the BASE_URL variable that Nuxt automatically injects into the app.html template. This variable points to the base URL of your compiled assets. Update your image tags like this:
<img src="<%= BASE_URL %>assets/images/chrome.png" alt="Chrome browser">
Webpack will process your assets correctly during build, and BASE_URL will ensure the path points to the right location in the dist folder.
Why your original ~/assets/... path didn't work
In Vue components, Nuxt uses Webpack to resolve the ~ alias to your project root. But app.html is a raw HTML template that's rendered before Webpack processes your components—so that alias never gets translated to the actual file path, leading to the 404 error.
Give one of these methods a try, and your modal images should load without any issues!
内容的提问来源于stack exchange，提问作者Geordy Oliver
