我在将图像插入html字符串时遇到问题。我使用react js。我从数据库中检索html字符串。html字符串的示例如下：
<div align = "justify"> <font face = "Trebuchet MS"> Various regional economic indicators in the third quarter of 2013 tended to slow in aggregate terms. <br> Indications of improvement in exports that are beginning to appear in most regions are still restrained by relative conditions <br> low commodity prices on the global market are not expected to offset the slowdown in household consumption and investment. Slowing economic growth is predicted to take place in most areas in Sumatra and Jakarta, <br> while Java and Eastern Indonesia (KTI) are projected to show slight growth. <br> <br> Meanwhile, inflation in all regions is recorded higher during the quarter under review as the impact of <br> from the policy on the increase in the price of subsidized fuel oil (BBM) at the end of June 2013 and <br> disruption in food supply. Despite this, inflationary pressures began to ease at the end of the quarter under review as food supply constraints began to be overcome, particularly for <br> commodities onions and chilies, as well as additional supply of imported meat. At the end of the <br> quarter, food inflationary pressure was even lower in several regions in Sulawesi, Maluku and Nusa Tenggara due to deep price corrections for fresh fish commodities. <br> <br> <span style = "font-size: 11pt; color: rgb (31, 73, 125);" lang = "IN"> The material can be downloaded from the website address Bank Indonesia official. </span> <br> </div>
我想在html字符串的中间添加一个图像。有人有解决方案吗？
感谢大家帮助
您可以使用dangerouslySetInnerHTML。在你的情况下，它会是这样的：
import React from "react";
import "./styles.css";
const test =
'<div align = "justify"> <font face = "Trebuchet MS"> Various regional economic indicators in the third quarter of 2013 tended to slow in aggregate terms. <br> Indications of improvement in exports that are beginning to appear in most regions are still restrained by relative conditions <br> low commodity prices on the global market are not expected to offset the slowdown in household consumption and investment. Slowing economic growth is predicted to take place in most areas in Sumatra and Jakarta, <br> while Java and Eastern Indonesia (KTI) are projected to show slight growth. <br> <br> Meanwhile, inflation in all regions is recorded higher during the quarter under review as the impact of <br> from the policy on the increase in the price of subsidized fuel oil (BBM) at the end of June 2013 and <br> disruption in food supply. Despite this, inflationary pressures began to ease at the end of the quarter under review as food supply constraints began to be overcome, particularly for <br> commodities onions and chilies, as well as additional supply of imported meat. At the end of the <br> quarter, food inflationary pressure was even lower in several regions in Sulawesi, Maluku and Nusa Tenggara due to deep price corrections for fresh fish commodities. <br> <br> <span style = "font-size: 11pt; color: rgb (31, 73, 125);" lang = "IN"> The material can be downloaded from the website address Bank Indonesia official. </span> <br> </div>';
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<div className="content" dangerouslySetInnerHTML={{ __html: test }}></div>
</div>
);
}
注意：如果您不知道要注入什么html，那么dangerouslySetInnerHTML可能是危险的。
更好的解决方案是使用this包：
import DOMPurify from "dompurify";
const withSanitzedHtml = DOMPurify.sanitize(test);
注意：对于添加图像，您可以将字符串拆分到要附加的位置，然后再次连接。就像在普通js上一样。
这是的演示
试试这样的东西：
<img src="img_chania.jpg" alt="Flowers in Chania">
有关更多详细信息，请研究：https://www.w3schools.com/html/html_images.asp