如何将图像标签插入 html 字符串？

Question

我在将图像插入 html 字符串时遇到问题。我使用反应 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 字符串的中间添加一个图像。有人有解决办法吗？

感谢大家的帮助

Answer 1

您可以使用 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 上做的那样。

这里是demo

Answer 2

试试这样的：

<img src="img_chania.jpg" alt="Flowers in Chania">

更多详情学习：https://www.w3schools.com/html/html_images.asp