react 中使用dangerouslySetInnerHTML 解析富文本图片或者视频过大过宽显示问题

最新推荐文章于 2026-01-20 22:23:19 发布

原创最新推荐文章于 2026-01-20 22:23:19 发布 · 452 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js

收录于

React 专栏收录该内容

7 篇文章

订阅专栏

在将HTML字符串传递给dangerouslySetInnerHTML之前，先处理字符串，修改图片或者视频的width和height属性。

const processRichText = (htmlString) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, "text/html");
  const images = doc.getElementsByTagName('img');
  const videos= doc.getElementsByTagName('video');
  
  for (let img of images) {
    img.style.maxWidth = '100%';
    img.style.height = 'auto';
    // 可以添加其他属性，如object-fit来更好地控制图片的展示方式
    img.style.objectFit = 'contain';
  }
  
    for (let videoo of videos) {
    videoo.style.maxWidth = '100%';
    videoo.style.height = 'auto';
  }

  return doc.body.innerHTML;
};

const richTextWithProcessedImages = processRichText(yourRichTextString);

// 然后在组件中使用
<div dangerouslySetInnerHTML={{ __html: richTextWithProcessedImages }} />