React组件无法加载本地图片问题排查求助

我正在开发一个作品集网站，每个客户/项目都有独立的信息页面。目前还没确定图片托管方案，先尝试在项目页面加载本地图片。代码没有报错，但浏览器里完全不显示图片。我怀疑是<img>元素没挂载，但不确定。还有哪些可能的原因？这和Webpack配置有关吗？

注： <img>标签的src属性已经正确指向public文件夹路径。

App.js #

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import './App.css';

import Landing from "./components/Landing";
import About from "./components/About";
import ProjectPage from "./components/ProjectPage";

import projects from "./utils/projectlists.js";

function App() {

  return (
    <div className="App">
       <Router>
         <Routes>
           <Route element={<Landing />} exact path="/" />
           <Route element={<About field="design" />} exact path="/design" />
           <Route element={<About field="web"/>} exact path="/web" />
           <Route element={<ProjectPage projects={projects} />} path="/projects/:name"/>
         </Routes>
       </Router>
    </div>
  );
}

export default App;

projectlists.js (示例信息) #

const projects = [
      {
        id: 1,
        name: "Project Name",
        link: "project-name",
        skills: "Project skills",
        images: ["image1.png", "image2.png", "image3.png"],
      }
]

export default projects;

ProjectPage.js (图片加载容器所在组件) #

import React from "react";
import { useParams } from "react-router";
import '../App.css';

export default function ProjectPage({ projects }) {
  const { name } = useParams();

  return (
    <div className="project-layout">
      <div className="photo-box">
        {projects.filter(project => name === project.link).map(
          project => (
            project.images.forEach(image => (
              <div key={project.id}>
                <img className="proj-image" src={require(`../../public/assets/images/${image}`)} alt=""></img>
              </div>
              )
            )        
          ))
        }
      </div>
    </div>
  );
};

问题排查与解决方案 #

1. 核心问题：forEach无法生成JSX元素 #

你在ProjectPage.js中使用project.images.forEach()遍历图片数组，但forEach没有返回值，不会生成任何<img>节点。必须替换为map()，它会返回遍历生成的JSX元素：

修改ProjectPage.js的渲染部分：

{projects.filter(project => name === project.link).map(filteredProject => (
  filteredProject.images.map((image, index) => (
    <div key={`${filteredProject.id}-${index}`}>
      <img className="proj-image" src={`/assets/images/${image}`} alt={filteredProject.name} />
    </div>
  ))
))}

• 用map()替代forEach()，确保返回可渲染的JSX元素
• 给每个元素设置唯一key（项目ID+图片索引，避免重复）
• 直接使用根路径/assets/images/${image}，public文件夹下的资源可通过根路径直接访问，无需require

2. 路径有效性验证 #

确认图片实际路径是否正确：

• 检查public/assets/images文件夹存在，且图片文件名（含大小写）与projectlists.js中完全一致
• 在浏览器地址栏直接访问http://localhost:3000/assets/images/image1.png，能打开则路径无误

3. Webpack配置（自定义配置场景） #

如果使用自定义Webpack配置，需确保file-loader/url-loader正确处理图片：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'assets/images',
            },
          },
        ],
      },
    ],
  },
};

使用Create React App的话，默认已配置好该规则，无需额外操作。

4. 组件数据验证 #

在ProjectPage.js中添加日志，确认数据是否正确传递：

export default function ProjectPage({ projects }) {
  const { name } = useParams();
  const filteredProjects = projects.filter(project => name === project.link);
  console.log(filteredProjects); // 查看是否匹配到项目
  if(filteredProjects.length > 0) {
    console.log(filteredProjects[0].images); // 查看图片数组是否存在
  }

  return (
    // 原有渲染代码
  );
};

若控制台能打印出正确的项目和图片数组，说明数据无问题，问题出在JSX渲染逻辑。

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