如何在Cloudinary+Strapi+Gatsby技术栈中实现图片懒加载

最优处理环节：Gatsby前端处理，原因是无需修改后端部署逻辑、灵活性最高、适配前端渲染场景最直接。Cloudinary分发端仅能优化图片本身，无法修改HTML标签属性，无法独立实现懒加载；Strapi中间件处理适合多端复用场景，但需要调整后端代码。

方案1：零依赖原生懒加载（推荐90%场景使用） #

直接在渲染富文本前，通过正则替换给所有img标签添加原生懒加载属性loading="lazy"，当前主流浏览器覆盖率超过95%，完全满足生产环境需求。
代码示例：

// 富文本预处理函数
const addLazyLoadToHtml = (rawHtml) => {
  // 给所有img标签追加loading="lazy"属性，同时可统一补充Cloudinary优化参数
  return rawHtml.replace(/<img\s+/g, '<img loading="lazy" ')
}

// 组件内渲染
<div 
  dangerouslySetInnerHTML={{ __html: addLazyLoadToHtml(strapi返回的富文本内容) }} 
/>

如果需要同时开启Cloudinary自动优化，替换逻辑可以改成：

return rawHtml.replace(/<img\s+src="([^"]+cloudinary[^"]+)"/g, '<img loading="lazy" src="$1?q_auto,f_auto"')

自动给所有Cloudinary来源的图片加上自动格式转换、自动质量压缩参数，进一步降低加载体积。

方案2：高级懒加载（需依赖第三方库，适合需要自定义占位、加载动画的场景） #

如果需要更复杂的懒加载效果（比如低质量占位图、淡入动画、加载错误兜底），可以用html-react-parser库把HTML字符串解析为React元素，将所有img标签替换为自定义的懒加载组件：
代码示例：

import parse from 'html-react-parser';

// 自定义懒加载图片组件，可自行扩展逻辑
const LazyImage = ({ src, alt }) => {
  return <img 
    src={src} 
    alt={alt || '内容图片'} 
    loading="lazy"
    className="w-full h-auto transition-opacity duration-300"
  />
}

// 富文本解析配置
const parseConfig = {
  replace: (node) => {
    if (node.name === 'img') {
      const { src, alt } = node.attribs;
      // 仅处理Cloudinary来源图片可加判断：if(src.includes('cloudinary.com'))
      return <LazyImage src={src} alt={alt} />
    }
  }
}

// 组件内渲染
<div>{parse(strapi返回的富文本内容, parseConfig)}</div>

其他可选处理方案 #

• Strapi中间件处理 #

如果后续有多个端（比如小程序、H5端）共用同一份富文本接口，可以在Strapi的富文本保存钩子、或者接口返回中间件中统一给img标签添加loading="lazy"属性，实现一次修改多端复用。缺点是需要调整后端代码、重新部署Strapi服务，调整逻辑需要后端配合。

• Cloudinary端配合优化 #

Cloudinary无法独立实现懒加载，但可以在图片链接后拼接优化参数，配合懒加载逻辑进一步提升加载速度，常用参数包括q_auto（自动质量压缩）、f_auto（自动适配最优格式）、w_auto（自动适配设备宽度）。

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