React项目部署到服务器后图片无法显示，新手求助技术支持

问题分析 #

你当前使用绝对路径/assets/logo.jpg加载图片，本地开发时可能正常，但部署到服务器后，因静态资源实际路径与预期不符，导致图片加载失败。

解决方法 #

1. 确保静态资源放置位置正确 #

如果是Create React App（CRA）项目，将logo.jpg放到项目根目录的public/assets文件夹下（无此目录则手动创建）。构建部署时，工具会将public目录下的文件原样复制到构建产物根目录，此时/assets/logo.jpg的路径可正确指向图片。

2. 通过导入方式使用图片 #

在组件中直接导入图片，让Webpack自动处理路径，这种方式更可靠：

import React from "react";
import ReactDOM from "react-dom/client";
// 导入图片资源
import logo from "./assets/logo.jpg";

const Header = () => {
  return (
    <div className="header">
      <div className="logo-container">
        <img className="logo" src={logo} alt="Logo" />
      </div>
      <div className="nav-items">
        <ul>
          <li>Home</li>
          <li>About us</li>
          <li>Contact us</li>
          <li>Cart</li>
        </ul>
      </div>
    </div>
  );
};

const AppLayout = () => {
  return (
    <div className="App">
      <Header />
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<AppLayout />);

注意：此时图片需放在src/assets目录下（与组件同级或其子目录），Webpack构建时会自动处理图片路径和文件名哈希。

3. 调整服务器部署路径配置 #

若项目未部署在服务器根目录（比如部署在https://your-domain.com/react-app/），需修改package.json中的homepage字段：

{
  "homepage": "/react-app/"
}

修改后重新执行npm run build再部署，绝对路径会自动加上前缀，确保资源能被正确定位。

4. 验证构建产物结构 #

执行npm run build后，检查build目录：

• 若用第一种方法，build/assets/logo.jpg需存在；
• 若用导入方式，图片会被打包到build/static/media目录，文件名可能带哈希后缀。
  部署时要确保服务器将build目录设为静态资源根目录。

内容的提问来源于stack exchange，提问作者Dhiraj Mehta