问题复现:
一开始是这样写的:
<img :src="'../../assets/'+ item.picUrl +'.png'" />
结果图片不显示,控制台报错404,图片的加载地址解析为:http://test.hengdaomed.com/assets/doc_chen.png
解决方案:添加require()
<img :src="require('../../assets/'+ item.picUrl +'.png')" />
此时图片就可以正常显示,图片的加载路径经过webpack编译后解析为:http://test.hengdaomed.com/pda-fe/static/img/doc_chen.3c27b5b.jpg
原因:
图片资源是静态文件,而静态资源可以用两种方式进行处理:
1. 在 JS 导入或在 template/CSS 中通过相对路径被引入。这类引用会被webpack处理。 2. 放置在 static 目录下或通过绝对路径被引入(vue-cli3是 public 目录)。这类资源将会直接被拷贝,而不会被 webpack 处理。
在vue的项目中,webpack使用的是vue-loader,在编译过程中,所有的资源路径例如 <img src="...">、background: url(...) 和 @import 会作为模块依赖。
而动态加载图片,图片的地址无法被解析,因此最终没有被打包到文件中,找不到该图片。