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

解决方法

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

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

直接在后端返回的URL后面拼接字符串:

XXX.png?x-oss-process= ```

缩略图方法介绍:

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

设置图片清晰度

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

快速获取视频的封面方法

javascript 复制代码
 ?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast
 //直接在视频连接后面拼接下面的参数
html 复制代码
<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)"预览

javascript 复制代码
 // 预览图片
function preview(e, preImgs) {
	i.previewImage(e, preImgs)
}
相关推荐
2501_915909066 小时前
“绑定 HTTPS” 的工程全流程 从证书配置到真机验证与故障排查
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915918417 小时前
iOS 混淆实战 多工具组合完成 IPA 混淆、加固与工程化落地(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者810 小时前
如何系统化掌握 iOS 26 App 耗电管理,多工具协作
android·macos·ios·小程序·uni-app·cocoa·iphone
BumBle11 小时前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app
2501_9159214311 小时前
运营日志驱动,在 iOS 26 上掌握 App 日志管理实践
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q196328847517 小时前
python+uniapp基于微信美食点餐系统小程序
spring boot·python·微信·django·flask·uni-app·node.js
阿金要当大魔王~~18 小时前
uniapp 请求携带数据 \\接口传值 \\ map遍历数据
前端·javascript·uni-app
2501_9151063220 小时前
HTTPS 爬虫实战指南 从握手原理到反爬应对与流量抓包分析
爬虫·网络协议·ios·小程序·https·uni-app·iphone
2501_9160074720 小时前
iOS 上架技术支持全流程解析,从签名配置到使用 开心上架 的实战经验分享
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916007471 天前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone