vue的图片src引入失败的解决办法

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

<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配置下等价于/src
4.相对根目录的路径 "/assets/logo_blue.png" webpack不解析

你可能感兴趣的:(webpack)