react如何从后端获取图片

使用 Fetch API 获取图片

在 React 中通过 fetch 从后端获取图片数据，通常返回的是二进制流（Blob）。将 Blob 转换为可展示的 URL 并渲染到 img 标签。

import { useState, useEffect } from 'react';

function ImageComponent() {
  const [imageUrl, setImageUrl] = useState(null);

  useEffect(() => {
    fetch('https://your-api-endpoint.com/image')
      .then(response => response.blob())
      .then(blob => {
        const url = URL.createObjectURL(blob);
        setImageUrl(url);
      });
  }, []);

  return (
    <div>
      {imageUrl && <img src={imageUrl} alt="Fetched from backend" />}
    </div>
  );
}

使用 Axios 获取图片

Axios 可以更简洁地处理二进制响应，通过设置 responseType: 'blob' 直接获取 Blob 对象。

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

function AxiosImage() {
  const [imageSrc, setImageSrc] = useState('');

  useEffect(() => {
    axios.get('https://your-api-endpoint.com/image', {
      responseType: 'blob'
    }).then(response => {
      const url = URL.createObjectURL(response.data);
      setImageSrc(url);
    });
  }, []);

  return <img src={imageSrc} alt="Axios fetched image" />;
}

处理 Base64 编码图片

如果后端返回的是 Base64 字符串，直接将其作为 src 使用。

function Base64Image({ base64String }) {
  return <img src={`data:image/jpeg;base64,${base64String}`} alt="Base64" />;
}

添加请求头验证

需要认证的接口，可在请求头中添加 Authorization 或其他必要字段。

fetch('https://protected-api.com/image', {
  headers: {
    'Authorization': 'Bearer your_token_here'
  }
})
.then(response => response.blob())
.then(blob => {
  const url = URL.createObjectURL(blob);
  // 使用 url 更新状态
});

清理对象 URL

为避免内存泄漏，在组件卸载时释放创建的 URL。

useEffect(() => {
  let objectUrl;
  fetch('https://api.com/image')
    .then(res => res.blob())
    .then(blob => {
      objectUrl = URL.createObjectURL(blob);
      setImageUrl(objectUrl);
    });

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

错误处理

添加错误处理逻辑应对网络请求失败或无效响应。

fetch('https://api.com/image')
  .then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.blob();
  })
  .then(blob => {
    const url = URL.createObjectURL(blob);
    setImageUrl(url);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });