Vue 的移动端Vant组件库中本地图片引入循环遍历不显示的解决办法？

最近在使用vant做项目使用van-image的过程中，发现如下几个问题：

1. 使用van-image引入图片资源，图片不显示；
2. 使用img标签引入图片资源可以显示，但是若是for循环遍历出来的图片资源，同样不显示。

---

首先说一下项目的场景：

1. 项目的原型图是这样的

使用如下代码即可实现：

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

但是我们的ui图是这样的

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

	

		
	
	

		{
    {item.text}}
	

查看效果如下：

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

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

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

---

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

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

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

尝试一下：

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

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

---

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

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

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