我们直接使用 v-bind 的方式导入无法正常导入
<image :src="item.src" alt=""/>
是因为 页面显示为html+css+js而vue变成我们可以看到的样子是需要打包变成html+css+js的,
在打包过程中将item.src的变量 取出变成/image/icon.svg只是 将地址过去当作静态资源了 然而在我们运行的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=""/>