Vue的移动端Vant组件库中本地图⽚引⼊循环遍历不显⽰的解
决办法？
最近在使⽤vant做项⽬使⽤van-image的过程中，发现如下⼏个问题：
1. 使⽤van-image引⼊图⽚资源，图⽚不显⽰；
2. 使⽤img标签引⼊图⽚资源可以显⽰，但是若是for循环遍历出来的图⽚资源，同样不显⽰。
⾸先说⼀下项⽬的场景：
1. 项⽬的原型图是这样的
使⽤如下代码即可实现：
<van-grid :column-num="3">
<van-grid-item
v-for="(item, index) in qyxcList"
:key="index" icon-prefix="my-icon"
:icon="item.icon"
:text=""
:to="item.path" />
</van-grid>
查vant组件库，发现使⽤Grid 宫格可以很好的实现，其中的icon图标可以使⽤iconfont图标库下载引⼊，具体引⼊⽅式下次会总结分享。
但是我们的ui图是这样的
这个时候我们就不能使⽤Grid 宫格常规的写法了，需要在原有的组件上做⼀些更改。
<van-grid-item
v-for="(item, index) in qyxcList"
:key="index"
:text=""
:to="item.path">
<div class="icon-img">
<van-image :src="item.photo" />
</div>
<div class="icon-text">
<span>{{}}</span>
</div>
icon图标库
</van-grid-item>
查看效果如下：
不能正确的显⽰，查了⼀些资料。有的同学说使⽤<img src=" " />标签来实现。所以就尝试了⼀下。
图⽚依旧没有出来，但是如果不给img使⽤循环遍历的⽅式获取路径，⽽直接写路径，就可以显⽰出来。
到此为⽌，说明问题并不是出在了标签上，van-image标签没有问题。可能是路径出了问题。
因此，考虑vue⽂件引⼊css样式的时候，是通过在build / f.js中的resolve中进⾏配置，然后通过@import '~@/assets/styles/varibles.styl' 来引⼊的
那么我们这⾥写的图⽚路径是否也可以通过同样的⽅式引⼊呢？
尝试⼀下：
完美的解决了之前的问题，我们在试试使⽤van-image是否也可以实现？
同样可以实现图⽚的显⽰。
但是，为什么需要添加require才可以实现呢？webpack是如何处理解析图⽚的，为什么写相对路径图⽚会不显⽰？这个问题，我也在研究学习中。查了⼀位博主的⽂章，可以给⼀些思路。#前端爱⼗七# 。
希望⼤家各位同学⼀起讨论，早⽇解决这个困惑。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。