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)
}
相关推荐
web_Hsir2 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir2 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa4 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
耶啵奶膘6 小时前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
程序猿看视界21 小时前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨21 小时前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆21 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na0121 小时前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
web_Hsir1 天前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
平凡的阿泽1 天前
uniapp编译的app在ios上内存泄漏了
uni-app