javascript - 如何仅显示来自 HTML 的图像

Question

你好，

我有一个 React 应用程序，我正在使用 axios 获取 Blogger API。在响应中，有一个 content属性(property)。它包含 HTML，但在这样的字符串中:

   {
       "content": "<div> some content </div>"
   }

所以我正在使用 react-html-parser将其转换为 JSX 的包。

问题是，我想拿第一个<img/>来自这个content JSX 并仅显示它 - 隐藏其他元素。

---

我试过设置display: none对于 *和 display: block对于 img ，但随后什么都看不到 - 包括图像。

---

---

提前致谢

Answer 1

可以先将图片标签提取为字符串，然后通过react-html-parser显示出来

试试这个

let imageTagStr = content.match(/<img\s+[^>]*src="([^"]*)"[^>]*>/i);