uni小程序图片预览

单图预览

代码：

<view class="poster" @click="previewImage">
	<image :src="$common.image(newDetail.image)"  :data-src="newDetail.image" mode="aspectFill">image>
view>
1
2
3

// 预览图片
previewImage(e) {
	// 传入的必须是个数组,如果一张图也需要先处理成数组
	let imgsArray = [];
	imgsArray[0] = e.target.dataset.src;
	uni.previewImage({
		current: 0,
		urls: imgsArray,
		success: res => {
			console.log("成功");
		},
		fail: res => {
			console.log("失败");
		}
	});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

多图预览

列表里面的列表数据
即为数组中的数组 外层循环之后 内层也有循环
代码：

<view class="item" v-for="(item,index) in postsList" :key="index">
	
	
	<view v-for="(itemImg,indexImg) in item.images" :key="indexImg" @click="previewImage(index,indexImg)"> 
		<image :src="$common.image(itemImg)" mode="aspectFill">image>
	view>
	
view>
1
2
3
4
5
6
7
8

data() {
	return {
		postsList: [],
	}
},
methods:{
	// 图片预览
	previewImage(index,indexImg) {
		console.log(index);
		//新增一个图片空数组,把内部的图片数组拿出来赋进去，，当前内含全部图片数组
		let photoList =this.postsList.map(item => {
			return item.images;
		});
		console.log(photoList[index]);//我们需要的是当前某条信息的里面的数组
		uni.previewImage({
			current: indexImg, //默认显示当前点击的图片
			urls: photoList[index]
		});
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

console.log(photoList);

console.log(photoList[index]);

我们需要的图片数组是这样的：

如果是以下这样的，抓紧处理一下

网址

https://uniapp.dcloud.net.cn/api/media/image.html#unipreviewimageobject

uni 富文本预览图片

https://blog.csdn.net/KingShy1/article/details/114281769