最近在使用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="item.text"
        :to="item.path" />
</van-grid>

查找vant组件库，发现使用Grid 宫格可以很好的实现，其中的icon图标可以使用iconfont图标库下载引入，具体引入方式下次会总结分享。

但是我们的ui图是这样的

这个时候我们就不能使用Grid 宫格常规的写法了，需要在原有的组件上做一些更改。

<van-grid-item
	v-for="(item, index) in qyxcList" 
	:key="index" 
	:text="item.text" 
	:to="item.path">
	<div class="icon-img">
		<van-image :src="item.photo" />
	</div>
	<div class="icon-text">
		<span>{{item.text}}</span>
	</div>
</van-grid-item>

查看效果如下：

不能正确的显示，查找了一些资料。有的同学说使用<img src=" " />标签来实现。所以就尝试了一下。

图片依旧没有出来，但是如果不给img使用循环遍历的方式获取路径，而直接写路径，就可以显示出来。

到此为止，说明问题并不是出在了标签上，van-image标签没有问题。可能是路径出了问题。

---

因此，考虑vue文件引入css样式的时候，是通过在build / webpack.base.conf.js中的resolve中进行配置，然后通过

@import '~@/assets/styles/varibles.styl' 来引入的

那么我们这里写的图片路径是否也可以通过同样的方式引入呢？

尝试一下：

完美的解决了之前的问题，我们在试试使用van-image是否也可以实现？

同样可以实现图片的显示。

---

但是，为什么需要添加require才可以实现呢？webpack是如何处理解析图片的，为什么写相对路径图片会不显示？

这个问题，我也在研究学习中。查找了一位博主的文章，可以给一些思路。#前端爱十七# 在vue中动态加载图片src属性，会出现图片加载不出来的情况。 

希望大家各位同学一起讨论，早日解决这个困惑。