解决v-for轮播图中图片无法显示

在Vue的v-for循环中遇到图片无法显示的问题,原因在于src属性未能正确获取到图片地址。解决方案是在script内的数组定义中,需要使用require()将图片地址包裹,确保其作为模块路径被解析。例如:`'img': require('../.../static/friut.jpg')`。这样做后,图片能够在页面上正常显示。
摘要由CSDN通过智能技术生成

v-fo中src拿不到img的地址,图片无法显示
view可以打印出list.data中的img值,说明数组没问题,已经拿到图片值;
将src直接赋值地址,有图片显示,那么就是src没有拿到图片地址;
网页元素检查中也发现,这里的图片img中没有显示图片url;
所以是src没有拿到值;
解决:src中的地址被当成字符串解释,所以在后面的script里面的数组定义中,图片地址要加上require,也就是写成:
‘img’: require(‘…/…/…/static/friut.jpg’);
在这里插入图片描述

解决v-for轮播图中图片无法显示

	<view >
		<swiper class="swiper">
			<block v-for="(item,index) in lable" :key="index">
				<swiper-item>
					<block v-for="(listdata,index) in item" :key="index">
						<view>
							<!-- <view class="">
								{{listdata.imge}} 这里可以打印出.imge的地址,说明地址没问题,是src取不到值
							</view> -->
							<image :src="listdata.imge" mode="widthFix" style="width: 20upx;height: 20upx;"></image>
							<!-- <image :src=require("listdata.imge") mode="widthFix" style="width: 20upx;height: 20upx;"></image> -->
							<!-- <image src="../../../static/coen/dingwei.png" mode="widthFix" style="width: 20upx;height: 20upx;">src直接赋值也没有问题 就是src拿不到.img地址</image> -->
							<text>{{listdata.title}}</text>
						</view>
					</block>
				</swiper-item>
			</block>
		</swiper>
	</view>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值