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

发现在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_m

努力小子

8658人浏览 · 2021-06-06 10:57:26

努力小子 · 2021-06-06 10:57:26 发布

发现在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就没问题了。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^