本地图像没有加载到React组件中

Question

我是在一个投资组合网站上工作，与不同的客户/项目，我工作过的每个有自己的信息页面。我还没有完全确定我想要在哪里托管图像，但现在我正在构建这些单独的项目页面，希望只在本地加载图像。目前，我在编写的代码中没有收到任何错误，但是我的图像没有在浏览器中呈现。我怀疑这可能是因为没有一个<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 (其中包含要加载的图像的div将进入其中)

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>
  );
};

Answer 1

只要试一试

<img className="proj-image" src={`../../public/assets/images/${image}`} alt={""}></img>

或

<img className="proj-image" src={require(`../../public/assets/images/${image}`).default} alt={""}></img>

Answer 2

将图像放在公用文件夹中，并使用它的路径作为src。

示例:将图像放在公共/图像文件夹中，然后，

<img src="/images/image1.jpg" />

Answer 3

问题解决了。事实证明，forEach不会像预期的那样返回任何内容；map方法正是我所需要的。这篇文章的答案是：forEach() in React JSX does not output any HTML