阿里云oss使用缩略图加载图片

Posted 2023-05-02

参考技术A 列表中使用原图加载会很卡，甚至闪退，将图片放到阿里云oss上，加载列表时在图片后拼接

?x-oss-process=image/resize,m_fill,h_100,w_100

宽高可以自己定，列表中使用缩略图加载图片会流畅很多，点击图片可以查看大图就可以了

微信小程序解决存在图片太大而有效显示区域较小--阿里云oss产生缩略图

OSS是使用通过URL尾部的参数指定图片的缩放大小

图片路径后面拼接如下路径：
     ?x-oss-process=image/[处理类型],x_100,y_50[宽高等参数]

     ?x-oss-process=image/resize,m_fill,h_高度,w_宽度,limit_0

//去除之前的参数，添加新的参数
resp.list.map( item => {
    item.logo = item.logo.replace(/?([0-9a-zA-Z/=_-]+)/g,‘?x-oss-process=image/resize,m_fill,h_104,w_104‘)
})