React项目无法加载服务器静态图片的问题求助

问题详情 #

已在Node.js服务器配置静态资源路由：

app.use("/uploads", express.static("public/uploads/images/"));

浏览器直接访问http://localhost:8080/uploads/文件名.png可正常查看图片，但在React项目中把该路径设为img标签的src属性时，图片无法显示。尝试过两种方式：

1. 拼接从MongoDB和服务器获取的userInfo?.avatar字段生成URL
2. 直接硬编码完整域名路径

React中img渲染代码：

{!token ? (
  <HiOutlineUserCircle
    className="fs-1 pointer"
    data-bs-toggle="dropdown"
    aria-expanded="false"  />
) : (
  <img
    src="http://localhost:8080/uploads/buzi.PNG"
    // src={`http://localhost:8080/uploads/${userInfo?.avatar}`} 
    alt={userInfo?.avatar} />
)} 

相关代码片段 #

自动登录Hook #

const useAutoLogin = () => {
  const dispatch = useDispatch();
  const autoLoginFunction = async (token) => {
    try {
      let dataFromToken = jwt_decode(token);
      let { data } = await autoLogin();
      if (data) {
        dispatch(authActions.login(dataFromToken.id));
        dispatch(authActions.updateUserInfo(data));
        return true;
      }
    } catch (err) {
      return false;
    }
  };
  return autoLoginFunction;
};
export default useAutoLogin;

自动登录API请求 #

import axios from "axios";
const autoLogin = () => {
  return axios.get("/auth/getUserById");
};
export default autoLogin;

Redux获取用户信息 #

const userInfo = useSelector((state) => state.auth.userInfo);

Redux状态管理配置 #

import { createSlice } from "@reduxjs/toolkit";

// 定义Redux需要存储的变量
const initialAuthState = {
  loggedIn: false,
  isAdmin: false,
  userData: null,
  userInfo: null,
  stay: false,
};

const authSlice = createSlice({
  name: "auth",
  initialState: initialAuthState,

  reducers: {
    login(state, action) {
      state.loggedIn = true;
      state.userData = action.payload;
      state.isAdmin = action.payload.isAdmin;
    },

    logout: (state) => initialAuthState,

    updateUserInfo(state, action) {
      state.userInfo = action.payload;
    },

    stayLoggedIn: (state, action) => {
      state.stay = action.payload;
    },
  },
});

export const authActions = authSlice.actions;

export default authSlice.reducer;

排查与解决方法 #

1. 配置CORS解决跨域问题 #

服务器未配置CORS会导致React无法加载跨域图片，添加CORS中间件：

const cors = require('cors');
// 替换为你的React项目地址
app.use(cors({ origin: 'http://localhost:3000', credentials: true }));

2. 确保静态资源路径绝对正确 #

使用绝对路径避免相对路径歧义：

const path = require('path');
app.use("/uploads", express.static(path.join(__dirname, "public/uploads/images/")));

同时检查：

• public/uploads/images/目录是否存在
• 文件名大小写是否和服务器上的一致（比如buzi.PNG和buzi.png是不同的）

3. 处理用户信息加载时机问题 #

组件可能在userInfo未加载完成时渲染img，导致src为undefined，添加加载状态判断：

{!token ? (
  <HiOutlineUserCircle
    className="fs-1 pointer"
    data-bs-toggle="dropdown"
    aria-expanded="false"  />
) : userInfo ? (
  <img
    src={`http://localhost:8080/uploads/${userInfo.avatar}`} 
    alt={userInfo.avatar} />
) : (
  <HiOutlineUserCircle className="fs-1 pointer" /> // 加载中占位
)} 

4. 验证Axios baseURL配置 #

确保自动登录请求能正确访问服务器，配置Axios基础地址：

// 在Axios全局配置文件中
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:8080';

5. 查看浏览器控制台定位错误 #

打开开发者工具Network标签，检查图片请求：

• 404：路径或文件名错误
• 403：跨域或权限问题
• 200但图片不显示：检查响应内容是否为有效图片文件

内容的提问来源于stack exchange，提问作者Reef Goldberg