Attempting to use a for-each loop within React component to dynamically load local images-CodePudding

I am working on a portfolio site, with various clients/projects I've worked on each having their own info page. I haven't quite worked out yet where I want to host images, but for now I'm building these individual project pages with hopes of just loading in images locally. Currently, I don't receive any errors with my code as written, but none of my images are being rendered in the browser. I suspect this might be because none of the <img> elements are being appended to anything, but honestly I'm not sure. What else could I be missing here? Would this have anything to do with Webpack configs?

Note: The src attributes on the img tags are utilizing the correct path to the public folder as is.

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 (example info)

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 (where the div containing images I want to load in will go)

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

CodePudding user response：

Just try

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

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

CodePudding user response：

Place images in public folder and use it's path as src.

Example: Put images in public/images folder and then,

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