Next.js中html-react-parser配合Image组件省略height是否为合法方案

两种场景报错差异的核心原因 #

• 直接编写 JSX 的场景：你导入并使用了 Next.js 的 Image 组件，触发了组件的内置 props 校验逻辑——非 layout="fill" 模式下，必须同时传入数字类型的 width 和 height。你仅传入了字符串类型的 width，触发报错属于正常校验行为。
• 用 html-react-parser 解析的场景：该库默认会把 HTML 字符串中的标签解析为原生 HTML 节点，完全不会识别 Image 是自定义 React 组件，更不会关联到你导入的 Next.js Image。此时生成的是一个无实际渲染能力的未知 HTML 自定义元素，自然不会触发 Next.js Image 的任何校验逻辑，图片甚至都无法正常加载。

若要通过 html-react-parser 合法使用 Next.js Image #

如果你的需求是在动态富文本、后端返回的 HTML 内容中嵌入 Next.js 优化图片，必须手动通过库的 replace 配置，把字符串中的 Image 标签映射到真实的 Next.js Image 组件，同时必须处理两个关键问题：

• 将解析得到的字符串类型的 width、height 转换为数字类型
• 补全缺失的必填属性：要么按业务需要补全 height 值，要么直接指定 layout="fill" 适配父容器尺寸

正确写法示例：

import parse from 'html-react-parser'
import Image from 'next/image'

const dynamicHtml = '<Image width="500" src="https://www.abc.de/fgh.jpg" />'

const parsedContent = parse(dynamicHtml, {
  replace: (domNode) => {
    // 匹配解析后的 image 标签（库会自动把标签名转小写）
    if (domNode.name === 'image') {
      const { src, width, alt } = domNode.attribs
      return (
        <Image
          src={src}
          width={Number(width)}
          height={Number(width) * 0.6} // 按实际业务的宽高比补全 height
          alt={alt || '动态加载图片'}
        />
      )
    }
  }
})

补充说明 #

• 只要真正关联到 Next.js Image 组件，缺失必填属性的报错就一定会触发，不会因为使用了 HTML 解析器就跳过校验。
• 如果你使用 Next.js 13+ App Router 中的新版 Image 组件，可通过配置远程图片域名白名单，让组件自动拉取远程图片的宽高属性，但该特性也仅在正常导入使用组件时生效，默认的 HTML 解析逻辑不会触发。

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