vue动态加载图片地址时报错404的解决方案

问题复现：

一开始是这样写的：

<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 会作为模块依赖。

而动态加载图片，图片的地址无法被解析，因此最终没有被打包到文件中，找不到该图片。