尝试在 React 组件中使用 for-each 循环来动态加载本地图像答案

【问题标题】：Attempting to use a for-each loop within React component to dynamically load local images尝试在 React 组件中使用 for-each 循环来动态加载本地图像
【发布时间】：2022-11-01 23:48:23
【问题描述】：

我在一个投资组合网站上工作，我处理过的各种客户/项目都有自己的信息页面。我还没有完全确定要在哪里托管图像，但现在我正在构建这些单独的项目页面，希望只在本地加载图像。目前，我写的代码没有收到任何错误，但我的图像都没有在浏览器中呈现。我怀疑这可能是因为没有任何<img> 元素被附加到任何东西上，但老实说我不确定。我还能在这里错过什么？这与 Webpack 配置有什么关系吗？

笔记：img 标记上的 src 属性按原样使用 public 文件夹的正确路径。

应用程序.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;

项目列表.js（示例信息）

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

export default projects;

项目页面.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>
  );
};

【问题讨论】：

标签： javascript reactjs react-native webpack create-react-app

【解决方案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>

【讨论】：

【解决方案2】：

将图像放在公共文件夹中，并将其路径用作 src。

例子：将图像放在 public/images 文件夹中，然后，

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

【讨论】：