Cloudinary+nuxt-picture和动态转换

Posted 2023-03-25

【中文标题】Cloudinary+nuxt-picture和动态转换

【英文标题】：Cloudinary+nuxt-picture and dynamic transformation

【发布时间】：2021-12-30 01:21:01

【问题描述】：

我使用 nuxt-picture 和 cloudinary。不幸的是，这种联系给我带来了很多问题。 我需要为以下断点生成图像

      xs: 320,
      sm: 720,
      md: 1280,
      lg: 1920,
      xl: 2048,

问题：

网站第一次加载，等待图片转换，对网站性能影响很大。 是否可以使用 cloudinary 预先准备图像并且不等待动态转换？

【问题讨论】：

它不适用于开箱即用的yarn generate？

顺便说一句，你的意思是nuxt/image？ image.nuxtjs.org

【参考方案1】：

Cloudinary 支持动态转换 - 即只需修改 URL 参数并请求原始图像/视频的不同版本 - 这是您在首次加载页面时所看到的。图像的派生/转换版本仅在 Cloudinary 收到请求后生成，因此，如果您有大量大型/高质量原件，则可能需要几秒钟才能即时生成所有内容，具体取决于您要求的确切转换。也就是说，后续请求将从存储或 CDN 缓存中返回图像，因此不会遇到任何延迟。

根据您的要求，也可以提前预生成您正在使用的所有转换版本，以避免首次请求延迟。这就是 Cloudinary 所说的 Eager Transformations。这允许您指定原始图像/视频的public_id 以及您想要生成的转换。生成图像会快很多，但对于视频，建议异步执行急切转换（即在后台），您可以使用Eager Notifications 了解这些转换何时完成并准备好使用。使用异步急切转换，您可以避免应用程序/服务器在急切转换生成时等待获得响应，这可能导致超时。使用异步急切转换允许您将具有生成所需版本的请求发送到 Cloudinary，一旦收到请求，您将立即收到回复，状态为您请求的所有转换版本的待定状态。 Cloudinary 将在后台安排任务以生成请求的转换版本。如果您指定了 eager_transformation_url，那么您将在该 URL 处获得一个 webhook 响应，其中包含一个 JSON 有效负载，详细说明了请求的急切转换的结果。

可以在upload API call 中为新图像/视频请求即时转换，或在upload preset 中进行配置，包括上传到媒体库时使用的上传预设。

对于现有的图像/视频，您可以通过explicit API 方法请求即时转换。

【讨论】：

OP 可能已经在使用 Nuxt 模块，所以他不需要调用 Cloudinary 的实际 vanilla 端点，因为我们确实有一个包装器。 image.nuxtjs.org/getting-started/static