ReactJS中如何将后端返回的二进制图片数据转为图片展示？

要把后端返回的二进制图片数据在React的<img>标签里展示，核心是把二进制数据转换成浏览器能识别的URL格式，具体步骤如下：

1. 请求后端API时指定响应类型 #

不管用fetch还是axios，都需要明确告诉请求工具要接收Blob类型的响应，而非默认的JSON格式。

用fetch的示例代码： #

const fetchImage = async () => {
  try {
    const response = await fetch('/api/images/your-image-id', {
      method: 'GET'
    });
    // 将响应转换为Blob对象
    const blob = await response.blob();
    // 生成可用于img的URL
    const imageUrl = URL.createObjectURL(blob);
    // 把URL存入状态，供img标签使用
    setImageSrc(imageUrl);
  } catch (error) {
    console.error('获取图片失败:', error);
  }
};

用axios的示例代码： #

import axios from 'axios';

const fetchImage = async () => {
  try {
    const response = await axios.get('/api/images/your-image-id', {
      // 指定响应类型为blob
      responseType: 'blob'
    });
    const imageUrl = URL.createObjectURL(response.data);
    setImageSrc(imageUrl);
  } catch (error) {
    console.error('获取图片失败:', error);
  }
};

2. 在组件中渲染图片 #

把生成的URL绑定到<img>的src属性即可，同时注意组件卸载时释放URL避免内存泄漏：

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

function ImageViewer() {
  const [imageSrc, setImageSrc] = useState(null);

  const fetchImage = useCallback(async () => {
    // 这里放入上面的请求逻辑
    try {
      const response = await fetch('/api/images/your-image-id', { method: 'GET' });
      const blob = await response.blob();
      const imageUrl = URL.createObjectURL(blob);
      setImageSrc(imageUrl);
    } catch (error) {
      console.error('获取图片失败:', error);
    }
  }, []);

  useEffect(() => {
    fetchImage();
    // 组件卸载时释放Object URL
    return () => {
      if (imageSrc) {
        URL.revokeObjectURL(imageSrc);
      }
    };
  }, [fetchImage, imageSrc]);

  return (
    <div>
      {imageSrc ? (
        <img src={imageSrc} alt="从Azure Blob获取的图片" />
      ) : (
        <p>图片加载中...</p>
      )}
    </div>
  );
}

export default ImageViewer;

3. 后端注意事项 #

确保你的.NET Web API返回响应时，正确设置图片对应的Content-Type头（比如image/jpeg、image/png），这样浏览器才能正确识别Blob类型，避免展示异常。

示例.NET后端代码片段：

[HttpGet("images/{id}")]
public async Task<IActionResult> GetImage(string id)
{
    // 从Azure Blob获取二进制数据的逻辑
    byte[] imageBytes = await _blobService.GetImageAsync(id);
    // 根据图片实际类型设置Content-Type
    return File(imageBytes, "image/jpeg"); 
}

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