如何使用 React 组件来显示图片（包括带标头的情况）

2024-02-22 01:56:02

使用 JavaScript Fetch API 和 React 请求图片

在 React 中显示图片，可以使用 fetch() 方法来请求图片。fetch() 方法是一个异步函数，它会返回一个 Promise 对象。当 Promise 对象被解决时，就会返回一个包含图片数据的 Response 对象。然后，您可以使用 Response 对象来获取图片的 URL，以便在 React 组件中使用。

例如，以下代码展示了如何使用 fetch() 方法请求图片：

fetch('https://example.com/image.jpg')
  .then((response) => {
    if (response.ok) {
      return response.blob();
    } else {
      throw new Error('Failed to load image');
    }
  })
  .then((blob) => {
    const objectURL = URL.createObjectURL(blob);
    // 在 React 组件中使用 objectURL 来显示图片
  })
  .catch((error) => {
    console.error(error);
  });

在上面的代码中，fetch() 方法被用来请求 https://example.com/image.jpg。如果请求成功（即 response.ok 为 true），则会返回一个包含图片数据的 Response 对象。然后，Response 对象被转换成一个 Blob 对象，以便在 React 组件中使用。

为了在 React 组件中使用 Blob 对象，您可以使用 URL.createObjectURL() 方法来创建一个对象 URL。对象 URL 是一个指向 Blob 对象的临时 URL。然后，您可以在 React 组件的 src 属性中使用对象 URL 来显示图片。

例如，以下代码展示了如何在 React 组件中使用对象 URL 来显示图片：

const Image = () => {
  const [objectURL, setObjectURL] = useState(null);

  useEffect(() => {
    fetch('https://example.com/image.jpg')
      .then((response) => {
        if (response.ok) {
          return response.blob();
        } else {
          throw new Error('Failed to load image');
        }
      })
      .then((blob) => {
        const objectURL = URL.createObjectURL(blob);
        setObjectURL(objectURL);
      })
      .catch((error) => {
        console.error(error);
      });

    return () => {
      URL.revokeObjectURL(objectURL);
    };
  }, []);

  return (
    <img src={objectURL} alt="Example" />
  );
};

在上面的代码中，useEffect() 钩子被用来请求图片并创建对象 URL。然后，src 属性被用来将对象 URL 设置为图片的来源。

如何在 React 中使用图片组件

在 React 中，您可以使用 <img> 标签来显示图片。<img> 标签是一个内联元素，这意味着它不会在文档流中产生新的块级元素。<img> 标签的 src 属性用于指定图片的来源。

例如，以下代码展示了如何在 React 中使用 <img> 标签来显示图片：

const Image = () => {
  return (
    <img src="https://example.com/image.jpg" alt="Example" />
  );
};

在上面的代码中，<img> 标签被用来显示 https://example.com/image.jpg 的图片。alt 属性用于指定图片的替代文本。替代文本是当图片无法显示时显示的文本。

您还可以使用 React 的 Image 组件来显示图片。Image 组件是一个 React 内置组件，它提供了一些额外的功能，例如延迟加载和错误处理。

例如，以下代码展示了如何在 React 中使用 Image 组件来显示图片：

const Image = () => {
  return (
    <Image
      src="https://example.com/image.jpg"
      alt="Example"
      loader={() => <div>Loading...</div>}
      error={() => <div>Error</div>}
    />
  );
};