使用dangerouslySetInnerHTML渲染ComicVine API返回HTML时懒加载图片无法加载

问题根因 #

你遇到的问题是ComicVine返回的HTML内容使用了站点自带的懒加载逻辑：前2张非懒加载图片直接填充了src属性，后续图片的真实地址存储在data-src、data-srcset自定义属性上，src仅放了1px的透明gif占位符，需要站点配套的懒加载JS触发后才会替换为真实地址，你直接注入HTML没有运行对应JS，自然无法加载图片。

解决方案1：预处理HTML字符串（最推荐） #

直接在渲染前对返回的character.description字符串做正则替换，把所有懒加载图片的data-src替换为src、data-srcset替换为srcset，直接关闭懒加载，所有图片立即加载，无需额外依赖：

const processDescription = (html) => {
  // 替换img标签的data-src为src
  let processed = html.replace(/<img([^>]*)\sdata-src=(["'])([^"']+)\2/gi, '<img$1 src=$2$3$2');
  // 替换data-srcset为srcset
  processed = processed.replace(/<img([^>]*)\sdata-srcset=(["'])([^"']+)\2/gi, '<img$1 srcset=$2$3$2');
  // 可选：移除懒加载专用class
  processed = processed.replace(/class=(["'])([^"']*)js-lazy-load-image([^"']*)\1/gi, 'class=$1$2$3$1');
  return processed;
}

// 渲染时使用处理后的内容
<div dangerouslySetInnerHTML={{ __html: processDescription(character.description) }} />

该方案不会出现渲染后图片闪烁问题，运行成本最低。

解决方案2：渲染后触发懒加载替换 #

如果需要保留懒加载能力、降低首屏资源消耗，可以在HTML注入到DOM后，手动遍历替换所有懒加载图片的属性，React示例如下：

// 在组件挂载/内容更新后执行
useEffect(() => {
  const lazyImgs = document.querySelectorAll('.js-lazy-load-image');
  lazyImgs.forEach(img => {
    if (img.dataset.src) img.src = img.dataset.src;
    if (img.dataset.srcset) img.srcset = img.dataset.srcset;
    img.classList.remove('js-lazy-load-image');
  })
}, [character.description])

如果需要实现滚动到视口才加载的完整懒加载逻辑，引入通用懒加载库监听带data-src属性的图片即可。

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