在uni-app中已经提供了预览图片的方法uni.previewImage，直接调用就可以了

如果是类似轮播图，是固定是几张图片，直接获取图片就行
html代码

<!-- 轮播图开始 -->

<view class="lunbo">
    <swiper 
        :indicator-dots="true" 
        :autoplay="false" 
        :acceleration="false" 
        :interval="3000" 
        :duration="1000">
        <swiper-item v-for="(lunbo,index) in detail.lunboImg" :key="index">
            <view class="swiper-item">
                <img 
                    :src="lunbo" 
                    :data-src="lunbo"  
                    @tap="previewImage(index)" 
                    class="swiper-item-img">
            </view>
        </swiper-item>
    </swiper>
</view>
<!-- 轮播图结束 -->

methods: {
    //预览轮播图
    previewImage:function(index){
        var i = this.detailList[0].lunboImg; //获取当前页面的轮播图数据
        //uniapp预览轮播图
        uni.previewImage({
            current:index, //预览图片的下标
            urls:i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
        })
    }
}

如果是点击查看对应文字的图片，就要先将图片地址传到方法里面

html代码

<view class="SKU-title-img">
    <image 
        mode="aspectFit" 
        :src="imgUrl" 
        @tap="SKUpreviewImage(imgUrl,index)"
        class="title-img"></image>
</view>
<view class="color-name">
    <!-- 点击改变图片 -->
    <text 
        :class="activeColor == colorIndex ? 'active':''" 
        v-for="(color,colorIndex) in SKUList.color" 
        :key="colorIndex" 
        @click="colorImg(color[1],color[2],colorIndex)">{{color[0]}}</text>
</view>

js代码

data() {
      imgUrl:''        //存放图片地址
       };
     },
methods: {
    //点击不同的颜色，改变图片地址
    colorImg:function(img){
        //定义一个变量
        var me = this;
        me.imgUrl = img;  //点击当前的颜色替换成当前颜色的图片
    },
    //SKU里面的图片预览
    SKUpreviewImage:function(image,index){
        //此方法传图片地址要数组的形式，所以定义一个数组，然后将内容push进去，再去做图片预览
        var arr = [];
        arr.push(image);
        //uniapp预览轮播图方法
        uni.previewImage({
            current:index, //预览图片的下标
            urls:arr //预览图片的地址，必须要数组形式
        })
    },
}