oss阿里云图片链接url高清图片设置为缩略图 vue 减少加载体积流量

需求:领导说图片加载很慢,而且花很多流量,需要减少体积,点击放大的时候再加载清晰的图片

我是直接在完整链接上加 ?x-oss-process=image/resize,p_5

例如

javascript 复制代码
const businessLicenseImage = https:xxxxxx   // 后端返回的阿里云完整ip地址
// 前端展示的时候 businessLicenseImage 为上述定义的ip地址
<img
  class="custom-img-card"
  :src="`${businessLicenseImage}?x-oss-process=image/resize,p_5`"
 />

我试了好几个,最后发现还是这个压缩的体积最好用,虽然缩略图会模糊一点

相关推荐
非洲农业不发达12 分钟前
windows终端体验大升级,让你拥有macos级别的美化
前端·后端
妙码生花21 分钟前
从 PHP 到 AI + Golang,程序员自救转型手记(十七):登录接口完善,登录页接口整合,解决跨域
前端·后端·ai编程
唐诗31 分钟前
改 3 行配置,我的 Tauri dev 冷启动从 100 秒干到 4 秒
前端·客户端
SmartBoyW43 分钟前
深入ECMAScript规范:彻底搞懂JS隐式类型转换与底层ToPrimitive机制
前端·javascript
牧艺1 小时前
Cursor Rules / Skills 分层设计:让 Agent 像「团队新同事」
前端·人工智能·cursor
咪库咪库咪1 小时前
vue3-组件
vue.js
光影少年1 小时前
react navite 跨端核心原理
前端·react native·react.js
用户852495071841 小时前
解密 JavaScript 中的 this:谁才是真正的调用者?
javascript·面试
monologues1 小时前
Vue 3 渲染器的核心秘密:从 VNode 创建到快速 Diff 算法
前端
奇奇怪怪的1 小时前
从开发到生产——生成优化、监控、安全与成本
前端