#私藏项目实操分享# uniapp图片预览

#私藏项目实操分享# uniapp图片预览

demo展示

<template>
  <view>
    <image :src="item" v-for="(item,index) in images" :key="index" mode="widthFix" @click="previewImage"></image>
  </view>
</template>

<script>
  export default {
    data() {
      return {
          //图片数组列表
          images: [
          "https://img-home.csdnimg.cn/images/20230307091957.jpg",
          "https://img-home.csdnimg.cn/images/20230307091957.jpg",
          "https://img-home.csdnimg.cn/images/20230307091957.jpg",
          ],
        }
      },
    methods() {
      //预览图片
      previewImage() {
        uni.previewImage({
          urls: this.images;//[图片地址]需要是数组格式
        });
      }
    }
  }
</script>

项目中使用

<template>
  <view>
    <image :src="item" v-for="(item,index) in images" :key="index" mode="widthFix" @click="previewImage(item,index)"></image>
  </veiw>
</template>
data() {
  return {
    images: [],
    filePath: 'https://cdn.xxxx.com/'
  }
},
onLoad() {
  this.getList() {
    api().then(res =>{
      if(res.data.code===0) {
        //adjuncts: "acedfe9df4c547e698b6943612dcf5fb/person/1633031557924655105.png,acedfe9df4c547e698b6943612dcf5fb/person/1633031576639639553.png"
        let images = res.data.data.records.adjuncts.split(",");//返回的字符串格式用split方法转为数组格式
        //转换后adjuncts: ["acedfe9df4c547e698b6943612dcf5fb/person/1633031557924655105.png","acedfe9df4c547e698b6943612dcf5fb/person/1633031576639639553.png"]
      }
    },err=> {})
  }
},
methods() {
  previewImage(item,index) {
    urls: [this.filePath + this.images[index]];[图片地址]
  }
},