app.vue中引用图片src=“../assets/logo.png“报错未找到图片

最新推荐文章于 2024-08-07 22:33:08 发布

努力小子

最新推荐文章于 2024-08-07 22:33:08 发布

阅读量8.9k

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/z2431435/article/details/117621327

版权

前端专栏收录该内容

25 篇文章

订阅专栏

在Vue项目中，遇到在app.vue文件中使用相对路径…/assets/logo.png引用静态资源导致的错误。原因是app.vue与assets同级，使用…/会向上一级目录查找。解决方案是删除…/，改为使用./assets/logo.png。理解相对路径的规则对于避免此类问题至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

发现在views或components里的vue里用src="…/assets/logo.png"是没有问题的，但是在app.vue里这么使用出现报错：


This relative module was not found:

* ../assets/logo.png in ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1db7dce2-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=template&id=7ba5bd90&

为什么呢？
很简单，app.vue是和assets平级的，当我们使用…/时代表向上一级退出
在这里插入图片描述
仔细观察左上角可以发现第一个是assets。
但如果直接点击图片呢？

可以看到正确情况应该是有src的，所以删去…/后使用./assets/logo.png就没问题了。