使用uni.previewImage ()方法

前端页面调用

<view class="news_content">

<view class="news_title">今天盐城西瓜产地收货，预计1000公斤，请大家做好收货准备</view>

<view class="news_imgs">

<image mode="aspectFit" src="https://www.shve.cn/uploads/images/20250415/202504151833334c0891446.png"        @click="previewImage"></image>

<image mode="aspectFit" src="https://www.shve.cn/uploads/images/20250415/202504151833334c0891446.png" @click="previewImage"></image>

<image mode="aspectFit" src="https://www.shve.cn/uploads/images/20250415/202504151833334c0891446.png" @click="previewImage"></image>

<image mode="aspectFit" src="https://www.shve.cn/uploads/images/20250415/202504151833334c0891446.png" @click="previewImage"></image>

</view>

</view>

js方法

<script setup>

 function previewImage(e) {

      let imgArr = ["https://www.shve.cn/uploads/images/20250415/202504151833334c0891446.png"];

      imgArr.push("https://www.shve.cn/uploads/images/20250415/202504151833334c0891446.png");

      uni.previewImage({

           current: imgArr[0],

           urls: imgArr,

      });

 }

</script>

current： 当前浏览图片路径

urls： 当前浏览的图片数组

注意：图片必须是以http://  https:// 开头的网络图片 而不是本地图片或者base64图片

如果图片过大，android显示黑屏问题，出现这种问题，解决方法是做ios和android判断，ios正常进行浏览，android通过 movable-area movable-view 去写浏览界面