<img height="50" src="@/assets/404_images/404.png" alt=""> // 正常加载
<img height="50" :src="`@/assets/404_images/404.png`" alt=""> // 动态地址,路径被加载器解析为字符串,图片找不到
// 加上require后动态图片正常加载
<img height="50" :src="require(`@/assets/404_images/404.png`)" alt="">
解释
require是node中的一个方法,作用是“引入模块、JSON、本地文件”。
用require引入一个图片文件的话,require返回的就是用于引入图片编译的路径。
src中引入的图片的相对路径或者绝对路径,vue项目通过webpack的devServer运行之后,默认的vue-cli配置下,图片会被打包成name.hash的图片名。