时间戳

首页 > 解决方案 > 不使用危险的SetInnerHTML 渲染的图像

html - 不使用危险的SetInnerHTML 渲染的图像

问题描述

React 15.6.2（我知道，这就是我们现在所处的位置）。

我正在尝试使用dangerouslySetInnerHTML（它来自我们的服务器，没有用户输入）呈现一个 html 页面。它正在工作，除了图像没有渲染 - 我只是得到损坏的图像图标。控制台中没有错误或警告。Chrome、Firefox 和 Edge 也有同样的问题。

这是测试html页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
img {
    width: 80%;
    height: 80%;
    overflow: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
</style>

</head>

<body>
<h1 align="center">Test page</h1><br/>

<img src="images/help-feature_main-menu.jpeg" alt="main menu" style="vertical-align:middle"/><br/>

</body>
</html>

这是呈现页面的代码

  componentDidMount() {
    fetch('/assets/getting_started/index.html')
      .then(response => {
        if(response.status >= 400) {
          throw new Error(`${response.status}: ${response.statusText}`);
        }
        return response.text();
      })
      .then(html => this.setState({ html: html }));
  }

  render() {
    return (
        <Segment>
          <div dangerouslySetInnerHTML={{ __html: this.state.html }} className="html-import" />
        </Segment>
    );
  }

我尝试了fetch不同形式的路径，包括将图像文件放在与源文件相同的目录中。我检查了它的内容，this.state.html它看起来不错，即 img 标签在那里看起来正确。

如果我在如下所示的 iframe 中呈现页面，则它可以与图像一起正常工作。但我不想这样做，因为我最终得到了 iframe 和浏览器窗口的滚动条，这很尴尬，或者如果我弄乱了 iframe 容器的高度属性（例如高度：70vh），我可以让它在窗口内调整大小，这样就没有窗口滚动条，但是在不同的高度，iframe 仍然会开始切断，或者最终看起来对于窗口的高度来说太小了。

<div className="html-iframe-container">
  <iframe src="/assets/getting_started/index.html"</iframe>
</div>

有什么建议么？谢谢

标签： htmlreactjs

解决方案

推荐阅读