最近在使用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属性,会出现图片加载不出来的情况。 

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

Logo

前往低代码交流专区

更多推荐