uni-app 图片预览

图片预览小demo

<template>
	<view>
		<view v-for="(item,index) in imgzu" :key="index" @click="yulan(index, imgzu)" class="tutu">
			<image :src="item" mode=""></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imgzu: [
				'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/42166d224f4a20a46b610b709b529822720ed00d.jpg',
				'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg',
				'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic5.nipic.com%2F20100225%2F1399111_094253001130_2.jpg&refer=http%3A%2F%2Fpic5.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620543122&t=d99ea488f8d29c35620dde47da98b44d'
			]
		};
	},
	methods: {
		// 图片预览
		yulan(index, urls) {
			uni.previewImage({
				current: index,
				urls: urls
			});
		}
	}
};
</script>
<style scoped>
.tutu {
	height: 200upx;
	width: 200upx;
}
.tutu image {
	height: 100%;
	width: 100%;
}
</style>