uniapp预览图片

以你之姓@ 2021-09-03 05:51 1475阅读 0赞

一、需求

  1. 最近有一个留言板需求，留言之后需要展示留言信息，信息里面除了文字还有图片。
  2. 点击图片，可预览图片。就用到了 uniapp 预览图片的功能：uni.previewImage(OBJECT)

二、使用

html

  1. <view class="img-c" v-show="item.pictureUrl">
  2.     <image class="img" v-for="(itemImg, imgIndex) in item.pictureUrl" :key="imgIndex" mode='widthFix' @tap.stop="onPreviewImageClick(item.pictureUrl)" :src="picIp + itemImg.address + picFileName + itemImg.fileName">
  3.     </image>
  4. </view>
  6. // 预览图片
  7.         onPreviewImageClick(image) { 
  8.             let imgArr = []
  9.             image.forEach(item => { 
  10.                 imgArr.push(this.picIp + item.address + this.picFileName + item.fileName)
  11.             })
  12.             //预览图片
  13.             uni.previewImage({ 
  14.                 urls: imgArr
  15.             })
  16.         },

在这里插入图片描述
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，1475人围观）

还没有评论，来说两句吧...

相关阅读

    相关 uniapp预览图片

    一、需求 最近有一个留言板需求，留言之后需要展示留言信息，信息里面除了文字还有图片。 点击图片，可预览图片。就用到了 uniapp 预览图片的功能：u

    以你之姓@以你之姓@/ 0 赞/ 1476 阅读