React项目中如何从RSS Feed提取并展示图片？

问题原因 #

你当前的item.item.content是完整的HTML字符串（包含<figure>、<img>等标签），并非带src属性的对象，直接写item.item.content.src会得到undefined，导致图片无法渲染。同时之前的JSX写法错误，也会导致图片不显示。

解决方案 #

下面提供两种可靠的提取方式，以及正确的图片渲染写法：

方法1：使用DOMParser（推荐，适配复杂HTML结构）

在获取RSS数据后，解析HTML字符串提取<figure>内<img>的src属性：

修改News组件中的getArticles函数：

const getArticles = async () => {
  try {
    const res = await axios.get("http://localhost:4000/");
    // 处理每篇文章，提取图片链接
    const processedArticles = res.data.map(article => {
      const content = article.item.content;
      let imgSrc = "";
      if (content) {
        const parser = new DOMParser();
        const doc = parser.parseFromString(content, "text/html");
        // 定位figure标签内的img元素
        const imgElement = doc.querySelector("figure img");
        if (imgElement) {
          imgSrc = imgElement.src;
        }
      }
      // 把提取到的图片链接添加到item对象中
      return {
        ...article,
        item: {
          ...article.item,
          imgSrc: imgSrc
        }
      };
    });
    setArticles(processedArticles);
  } catch (error) {
    console.log(error);
  }
};

然后在渲染Feed组件时传递提取好的图片链接：

<Feed 
  key={i}
  title={item.item.title}
  link={item.item.link}
  date={item.item.pubDate}
  picture={item.item.imgSrc}
  content={item.item.contentSnippet}
/>

方法2：使用正则表达式（适合结构固定的HTML）

如果RSS的HTML结构稳定，可以用正则直接匹配src属性：

const getArticles = async () => {
  try {
    const res = await axios.get("http://localhost:4000/");
    const processedArticles = res.data.map(article => {
      const content = article.item.content;
      let imgSrc = "";
      if (content) {
        // 匹配figure内img的src属性值
        const srcMatch = content.match(/<figure><img[^>]+src="([^"]+)"/);
        if (srcMatch && srcMatch[1]) {
          imgSrc = srcMatch[1];
        }
      }
      return {
        ...article,
        item: {
          ...article.item,
          imgSrc: imgSrc
        }
      };
    });
    setArticles(processedArticles);
  } catch (error) {
    console.log(error);
  }
};

正确渲染图片（Feed组件写法） #

在Feed组件中，需要用自闭合的<img>标签，并通过src属性传递图片链接：

// Feed.jsx示例代码
export default function Feed({ title, link, date, picture, content }) {
  return (
    <div className="feed-item">
      {/* 只有当图片链接存在时才渲染图片 */}
      {picture && <img src={picture} alt={title} className="feed-image" />}
      <h3><a href={link}>{title}</a></h3>
      <p className="feed-date">{date}</p>
      <p className="feed-content">{content}</p>
    </div>
  );
}

为什么之前的写法无效 #

• <> {picture} </>：React会自动转义HTML字符串，所以只会把content里的文本内容（包括链接文本）输出，不会渲染成图片。
• <img> {picture} </img>：这是错误的JSX语法，<img>是自闭合标签，正确写法是<img src={picture} />，不能把内容放在标签内部。

内容的提问来源于stack exchange，提问作者mtan006