vue 动态引入图片地址的方法

我们直接使用 v-bind 的方式导入无法正常导入

<image :src="item.src" alt=""/>

是因为 页面显示为html+css+js而vue变成我们可以看到的样子是需要打包变成html+css+js的，

在打包过程中将item.src的变量 取出变成/image/icon.svg只是 将地址过去当作静态资源了 然而在我们运行的127.0.0.1 的本机地址并没有127.0.0.1 /image/icon.svg的资源所以无法使用

通过require方法

<image :src="require(item.src)"/>

这reuire方法动态加载地址

然而这个时候浏览器报错 找不到这个Cannot find module '1-icon.svg'

因为require可以导入资源和model模块 你的require无法识别这是个包还是个资源

最终解决办法：

我们只需要在前面加上一定的地址 就可以让require识别这是个资源而并非包 

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