700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue 2 的图片src引入失败的解决办法 Vue:These relative modules were not found

vue 2 的图片src引入失败的解决办法 Vue:These relative modules were not found

时间:2022-02-26 23:40:22

相关推荐

vue 2 的图片src引入失败的解决办法 Vue:These relative modules were not found

正常在<img>标签加载图片的方式是

<img class="teamdiadema fl_img" src="../../assets/images/end/Diadema.png">

报错信息为Cannot find module “.”

修改为

<img class="teamdiadema fl_img" src="~@/assets/images/end/Diadema.png">

方法二

assets中的文件会经过webpack打包,重新编译,推荐该方式。而static中的文件,不会经过编译。项目在经过打包后,会生成dist文件夹,static中的文件只是复制一遍而已。简单来说,static中建议放一些外部第三方,自己的放到assets,别人的放到static中。

造成错误原因

vue2.5及以下版本以上两种写法都没有问题,2.6就出现这个问题,应该和webpack配置相关 。vue2.6用的是webpack4.0。

webpack资源处理的规则,分为相对路径,没有前缀的路径,带~的路径,相对根目录的路径

1.相对路径: "./assets/logo_blue.png" 2.没有前缀的路径 "assets/logo_blue.png" 被webpack解析为相对路径3.带~的路径 "~@/assets/theme/logo_blue.png" 被webpack解析为 require(src/assets/theme/logo_blue.png) 动态引入 @在webpack 被resolve.alias配置下等价于/src4.相对根目录的路径 "/assets/logo_blue.png" webpack不解析

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。