uniapp 小程序图片预览的问题（图文详细篇）

这篇文章主要写的是使用UNIAPP写小程序当中的图片点击放大预览的问题 看代码

<view v-for="(itemm,index) in mylist" :key="itemm.index">
				<view class="atrule">
					<image :src="itemm.SPURL" :data-src="itemm.SPURL" @tap="previewImage"></image>
					<view class="boolean">
						<view style="position: relative; top:11rpx; left: 20rpx; width: 100%; letter-spacing:5rpx; font-size: 30rpx; font-weight: 700;">{{itemm.SPMC}}</view>
						<view style="position: relative; top: 26rpx; left: 20rpx; width: 100%; font-size: 24rpx;">编号:{{itemm.SPBH}}</view>
						<view style="position: relative; top: 35rpx; left: 20rpx; width: 100%; font-size: 24rpx;">单位:{{itemm.Unit}}</view>
						<view style="position: relative; top: 60rpx; left: 20rpx; width: 100%; font-size: 24rpx; color: #DD524D;">单价:{{itemm.RetailPrice}}</view>
					</view>
				</view>
			</view>

1. 我的图片资源是网络资源，是后台返回给我的，其中要想点击图片放大就要用到一个事件，如下图所示：

2. 绑定事件之后，就开始写他的逻辑部分

	previewImage(e){
			let that = this
			let currentUrl = e.target.dataset.src
			console.log(e)
					//预览图片
				uni.previewImage({
					urls: currentUrl, // 需要预览的图片链接列表，可以写你图片链接的数组或者跟我一样，就写一个单独的链接
					current: currentUrl // 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张
					});
			
			},

3. 注意踩坑的点

1. 有的朋友 写完之后发现没有用 根本点不开 那么我就告诉你为什么点不开，看下图
   
2. 之所以点不开是大部分是因为你没有写这个属性 如果你不写这个属性的话，你拿不到图片的地址，如下图所示。
   
3. 如果不写的话 e.target.dataset.src 的值是undefined， 因为根本就没有绑定上值 如下图所示
   
   就如上图所示，属性里面根本就没有src地址，自然而然你拿不到了。
4. 如果写了属性的话 那么正确的显示应该是这样的，如下图：
   
   完美解决，很成功