如何在reactJS中获取正文图像

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [imageUrl, setImageUrl] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://example.com'); // 替换为你要获取的网页URL
        const htmlString = response.data;

        const parser = new DOMParser();
        const doc = parser.parseFromString(htmlString, 'text/html');

        const articleElement = doc.querySelector('article'); // 替换为你要选择的正文元素
        const imageElement = articleElement.querySelector('img'); // 替换为你要选择的图像元素

        const imageUrl = imageElement.src;
        setImageUrl(imageUrl);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {imageUrl && <img src={imageUrl} alt="正文图像" />}
    </div>
  );
};

export default MyComponent;