vue的图片src引入失败的解决办法_vue /src/assets/ 引入不行

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

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

报错信息为Cannot find module “.”
修改为

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

方法二
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不解析
1
2
3
4
5