uniapp——列表图片加载太多且空间占用太大的处理方法(降低清晰度)

解决方法

列表默认显示的降低清晰度,预览图片的时候加载原图。

如果图片是上传到阿里云的OSS上,可以快速获取图片缩略图的方法

直接在后端返回的URL后面拼接字符串:
XXX.png?x-oss-process= ```

缩略图方法介绍:

?x-oss-process=image/resize,m_fill,w_782,h_540
// XXX.png?x-oss-process=     下划线后面紧跟着的就是图片的宽高大小 (单位:px)

设置图片清晰度

?x-oss-process=image/quality,q_60 
//设置图片清晰度最后就是清晰度0-100,数字越大,清晰度越高

快速获取视频的封面方法

 ?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast
 //直接在视频连接后面拼接下面的参数

<block v-for="(img,imgIndex) in item.images" :key="imgIndex" v-if="item.images">
	<image :src="i.image(img+'?x-oss-process=image/quality,q_20')" mode="aspectFill" lazy-load
		:show-menu-by-longpress="true" @click.stop="preview(img,item.images)">
	</image>
</block>

lazy-load懒加载
:show-menu-by-longpress="true"长按
@click.stop="preview(img,item.images)"预览

 // 预览图片
function preview(e, preImgs) {
	i.previewImage(e, preImgs)
}
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值