在vue中，＜img :src=“./logo.png“ alt=““ /＞不显示的原因

 今天写vue项目中，在动态渲染拿到的数据时，其他数据都可以渲染出现，就是图片不能出现。

<img :src="item.goods_img" alt="" />

一开始找了许多相关的文章，就是没有相关的解决问题，知道找到

路由地址：vue动态加载图片地址时报错404的解决方案 - 牧羊狼 - 博客园 (cnblogs.com)

经过我的修改：

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

页面也是成功的出来了，原因是：“图片资源是静态文件，而静态资源可以用两种方式进行处理”：

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

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

细说就是：

在Vue项目中，如果动态加载图片的地址无法被解析，最终导致该图片没有被打包到文件中，通常是因为webpack无法静态分析动态加载路径，无法在编译时确定图片的路径。这可能会导致图片在打包后无法正确加载，或者在运行时出现404错误。

为了解决这个问题，可以使用require或import语法来引入动态加载的图片，这样webpack可以正确解析图片路径并将其打包到文件中。例如：

const imgUrl = require('./path/to/image.jpg'); // 或者 import imgUrl from './path/to/image.jpg';

这样做可以确保webpack在编译时正确解析图片路径并将其打包到文件中，从而避免动态加载图片路径无法被解析的问题