如何使用 Cloudinary 和 Strapi 延迟加载图像？

Posted 2023-03-25

【中文标题】如何使用 Cloudinary 和 Strapi 延迟加载图像？

【英文标题】：How can I lazy-load images with Cloudinary and Strapi?

【发布时间】：2021-12-22 10:03:58

【问题描述】：

我正在使用 Gatsby、Strapi 和 Cloudinary 开展一个项目。我在 Netlify 上部署前端，在 Heroku 上部署 Strapi 应用程序（添加了 Postgresql 数据库实例）。

我已经搜索了几个星期，但我似乎无法找到一种方法来延迟加载来自 Cloudinary 的图像。

我已将 Strapi 上的默认富内容编辑器替换为 ckeditor，以便编辑者可以将照片添加到他们的内容中。这些由 Cloudinary 自动上传和提供。

我的问题是，有没有办法延迟加载图像，如果有，是否应该在从 Cloudinary 提供图像时这样做，我应该将其作为 Strapi 中间件还是简单地通过 Gatsby？

注意：我没有在前端的任何地方采购图像，因为它是从 Strapi 解析为 html 的。我目前正在将获取的内容传递给div 使用 dangerouslySetInnerHtml.

【参考方案1】：

使用dangerouslySetInnerHtml 指令，您可以将富文本中的任何内容作为 HTML 内容插入，因此您无法控制自定义该内容的行为。因此，它将一次全部渲染。

除了使用第三方依赖项（我无法找到）/自定义方法来解析富文本之外，没有内置的方法可以做到这一点，这将使您能够使用任何自定义组件。无论哪种方式，想法都是解析富文本块以自定义输出。

另外，检查图片标签（<img>）是否附带loading=lazy属性：

<img src="image.jpg"  loading="lazy">