Cloudinary 如何实现点击按钮展示图片的最高分辨率版本？

以下是针对历史/档案图片场景，保障放大时返回最高画质的可落地方案：

• 区分预览图与放大图的URL生成规则
  页面默认加载的预览图可附加Cloudinary的压缩转换参数（如w_800,q_auto,f_auto）控制资源体积，加快首屏加载速度。点击放大按钮时直接移除所有尺寸、画质类转换参数，调用无转换参数的原始资源路径，即可获取上传时存储的最高分辨率原始版本，无需额外接口开发。
• 最高画质保障设置
  上传历史/档案类图片时，可在Cloudinary后台关闭对应资源文件夹的自动压缩、自动分辨率限制规则，确保原始资源完整存储。生成放大用URL时，也可主动附加q_100参数强制返回100%画质，避免全局规则影响输出质量。
• 加载体验优化
  可在用户点击放大按钮前预加载高清资源，避免点击后出现长时间白屏，参考实现代码如下：

  // 提前预加载最高清版本图片
  function preloadHighRes(cloudName, imagePublicId) {
    const highResUrl = `https://res.cloudinary.com/${cloudName}/image/upload/${imagePublicId}`
    const img = new Image()
    img.src = highResUrl
    return img
  }
  

• 超大分辨率图片适配方案
  如果你的历史档案图片单张分辨率极高（比如超过4K、单文件超过20MB），可启用Cloudinary的缩放瓦片功能，给资源配置多尺寸切片，放大查看时按需加载对应区域的高清切片，无需一次性加载整张原图，大幅提升大尺寸图片的查看体验。
• 现有Vue Demo优化建议
  你可以把Cloudinary资源的publicId单独提取为变量，不需要手动做URL字符串替换，降低出错概率，参考示例：

  <script setup>
  import { ref } from 'vue'
  // 替换为你自己的Cloudinary配置
  const cloudName = 'your_cloud_name'
  const imagePublicId = 'your_image_public_id'
  // 预览图：带压缩参数
  const previewUrl = `https://res.cloudinary.com/${cloudName}/image/upload/w_800,q_auto,f_auto/${imagePublicId}`
  // 放大图：无转换参数，原始最高清
  const highResUrl = `https://res.cloudinary.com/${cloudName}/image/upload/${imagePublicId}`
  
  const showZoomModal = ref(false)
  </script>
  

内容的提问来源于stack exchange，提问作者redshift