复现报错问题

        需要从后天获取数据 动态渲染图

        <img :src="'./img/'+ item.src+'.png'" />

        结果图片不显示报错404

解决 添加require()

         <img :src="require('./img/' + item.src + '.png')" >

原因

  图片资源是静态文件，而静态资源可以用两种方式进行处理：

在 JS 导入或在 template/CSS 中通过相对路径被引入。这类引用会被webpack处理。

2. 放置在 static 目录下或通过绝对路径被引入(vue-cli3是 public 目录)。这类资源将会直接被拷贝，而不会被 webpack 处理。

在vue的项目中，webpack使用的是vue-loader，在编译过程中，所有的资源路径例如 <img src="...">、background: url(...) 和 @import 会作为模块依赖。

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

在vue的项目中，webpack使用的是vue-loader，在编译过程中，所有的资源路径例如 <img src="...">、background: url(...) 和 @import 会作为模块依赖。

原文地址：https://www.cnblogs.com/edwardwzw/p/13141868.html