React中使用dangerouslySetInnerHTML渲染富文本时图片无法正常加载怎么办

• 核心原因是数据库存储的post_content已经做了HTML实体编码：<、>、"这类HTML特殊字符被转译为<、>、"等实体字符，直接传入dangerouslySetInnerHTML时，浏览器会将其识别为普通文本而非可解析的HTML标签，因此只会显示img标签的源码内容。
• 次要问题是HTML结构不符合规范：承载富文本的div标签被嵌套在<p>标签内部，根据HTML标准，段落标签<p>不允许嵌套块级元素，浏览器渲染时会自动提前闭合<p>标签，可能导致富文本渲染位置异常。

1. 先实现HTML实体解码方法，将转义后的实体字符还原为正常HTML符号，无需引入额外依赖：

// 可加入Conversation类内部或者作为公共工具方法
const decodeHtml = (encodedHtml) => {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = encodedHtml;
  return textarea.value;
}

2. 调整错误的HTML结构，将外层包裹富文本的<p>标签替换为<div>，避免浏览器自动修改DOM结构。
3. 修改dangerouslySetInnerHTML的赋值逻辑，先解码再处理斜杠：

<div className="content" dangerouslySetInnerHTML={{ 
  __html: stripSlashes(decodeHtml(this.props.items.post_content)) 
}}></div>

注意：使用dangerouslySetInnerHTML渲染动态内容前，请确保内容来源可信，建议先做XSS过滤处理，避免恶意脚本注入风险。

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