如何在React页面展示Express后端提供的静态文件？

先确认后端Express静态资源配置 #

首先检查你的express.static中间件是否正确挂载，确保public文件夹路径无误：

// Express核心配置示例
const express = require('express');
const app = express();
const path = require('path');

// 关键：挂载public文件夹为静态资源目录
// 用绝对路径避免相对路径出错，适配不同项目结构
app.use(express.static(path.join(__dirname, 'public')));

app.listen(3001, () => {
  console.log('后端服务运行在3001端口');
});

配置完成后，先在浏览器直接访问图片URL（比如http://localhost:3001/your-image.jpg），确认能正常显示图片，这是后续前端展示的前提。

前端React最简展示方式（无需fetch） #

静态图片不需要通过fetch请求获取，直接在img标签的src属性中填写后端图片的完整URL即可，这是最直接高效的方式：

// React组件示例
function ServerImage() {
  // 替换为你的后端地址和图片文件名
  const imageUrl = 'http://localhost:3001/avatar.png';
  return <img src={imageUrl} alt="服务器存储图片" style={{ width: '200px' }} />;
}

export default ServerImage;

如果前后端部署在同一域名下，也可以用相对路径（比如/avatar.png）。

若需通过fetch请求图片的处理方案 #

如果业务场景要求必须通过fetch获取图片（比如带权限验证的图片接口），需要将返回的二进制数据转成Blob，再创建可访问的Object URL：

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const getImage = async () => {
      try {
        const res = await fetch('http://localhost:3001/protected-image.jpg');
        if (!res.ok) throw new Error('图片请求失败');
        const blob = await res.blob();
        // 创建临时访问URL
        const objectUrl = URL.createObjectURL(blob);
        setImageSrc(objectUrl);
        // 组件卸载时释放资源，避免内存泄漏
        return () => URL.revokeObjectURL(objectUrl);
      } catch (err) {
        console.error('加载图片出错：', err);
      }
    };

    getImage();
  }, []);

  return imageSrc ? <img src={imageSrc} alt="Fetch获取的图片" /> : <div>图片加载中...</div>;
}

export default FetchImage;

常见问题排查 #

• 跨域问题：如果前后端端口不同（比如前端3000、后端3001），需在Express中配置CORS：

  const cors = require('cors');
  // 开发环境允许所有跨域请求，生产环境建议指定具体域名
  app.use(cors());
  

• 路径错误：确认public文件夹的实际位置与express.static配置的路径匹配，比如项目结构为backend/public/xxx.jpg，则必须用path.join(__dirname, 'public')确保路径正确。
• React代理配置：不想在前端写死后端地址的话，可在React项目的package.json中添加代理：

  "proxy": "http://localhost:3001"
  

  之后前端请求/xxx.jpg会自动转发到后端对应地址，img的src可直接写/xxx.jpg。

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