lsky-org / lsky-pro

☁️兰空图床(Lsky Pro) - Your photo album on the cloud.
https://www.lsky.pro
GNU General Public License v3.0
4.16k stars 612 forks source link

图片预览的建议 #115

Closed zzd closed 2 years ago

zzd commented 4 years ago

在“我的图片”栏里面,图片的缩略图能否改用加载真实的缩略小图,而不是加载原图后修改宽度。全部加载原图对前端的压力非常大,特别是图片质量普遍较高的时候,平均大小在2M以上,一页20张图片就需要加载40M流量,这对前端体验影响非常大。 image.png 在七牛云、又拍云、 OSS等对象存储中,服务商都提供有图片云端处理的接口,例如又拍云在链接后加入!和参数即可实现云端预处理,在图片批量加载时,可以提高速度和降低带宽。 参考链接: 又拍云USS:https://help.upyun.com/knowledge-base/image/#function 阿里云OSS:https://help.aliyun.com/document_detail/44688.html 七牛KODO:https://developer.qiniu.com/dora/api/1279/basic-processing-images-imageview2 腾讯云COS:https://cloud.tencent.com/document/product/460/6929

另:图片复制外链时,也可加入此类参数的选项,这对流量控制非常友好。

wisp-x commented 4 years ago

1.6.0 版本增加了环境变量配置,支持自定义链接参数,详见: https://www.kancloud.cn/wispx/lsky-pro/1569427
需要注意的是,自定义链接参数后所有的图片链接都会拼接上该参数,包括但不限于图片详情预览、接口返回的图片地址、上传后显示的地址。
如果只希望在用户端图片列表中使用自定义参数,需要自行修改代码,位置在: https://github.com/wisp-x/lsky-pro/blob/62b0ee5e2b6e8fb0922669fca1813f05770d5345/application/index/view/user/images.html#L175
此处 images[i].url 便是图片的 URL。

zzd commented 4 years ago

谢谢你,我已经找到并且修改了部分代码。不过我仍然希望能在以后的发布版里直接加入此参数。 又拍云:!/fw/300/quality/75,注意:!为又拍云默认分隔符,其可选!,-,_ 阿里云:?x-oss-process=image/resize,w_300/quality,q_75 七牛云:?imageView2/2/w/300/q 腾讯云:?imageView2/2/w/300/q/75 参数说明:限制宽度300px,相对质量75%

链接案例 http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_300/quality,q_75