在反应中从目标文件加载图像时出现问题

Question

I have an object file and can't seem to get the images to load from that file, if I do an import in the index file and call it, the images load and work fine but if I try it from the object file then it doesn't work. I'm not getting any errors in the console and have tried listing the images from different locations.

Here's the object file

export const projects = [
  {
    id: "0",
    image: "../../images/mayhemds.png",
    alt: "TelecomPlus",
    title: "TelecomPlus",
    desc: "Built the TelecomPlus website on the Apostrophe CMS, using the tech stack listed below.",
    tags: ["HTML", "JavaScript", "SCSS", "Apostrophe CMS"],
    source: "https://google.com",
    visit: "https://goggle.com",
  },
  {
    id: "1",
    image: "/public/data_trend.png",
    alt: "telecomplus",
    title: "Project 2",
    desc: "Lorem ipsum, dolor sit amet consectetur adipisicing elit.",
    tags: ["Html", "JavaScript", "SCSS", "Nunjucks", "Git"],
    source: "https://google.com",
    visit: "https://goggle.com",
  },
  {
    id: "2",
    image: "../../images/telecomplus.png",
    alt: "telecomplus",
    title: "Project 3",
    desc: "Lorem ipsum, dolor sit amet consectetur adipisicing elit.",
    tags: ["Html", "JavaScript", "SCSS", "Nunjucks", "Git"],
    source: "https://google.com",
    visit: "https://goggle.com",
  },
  {
    id: "3",
    image: "../../images/telecomplus.png",
    alt: "telecomplus",
    title: "Project 4",
    desc: "Lorem ipsum, dolor sit amet consectetur adipisicing elit.",
    tags: ["Html", "JavaScript", "SCSS", "Nunjucks", "Git"],
    source: "https://google.com",
    visit: "https://goggle.com",
  },
];

Here is the index.js file

import { projects } from "./projects";
import "./projects.css";

const Projects = () => {
  return (
    <>
      <div className="project-section" id="projects">
        <div className="project-container">
            <h2 className="project-heading">Projects</h2>
          <div className="card-wrap">
            {projects.map(
              ({ id, image, title, desc, tags, source, visit, alt }) => (
                <div className="project-card" key={id}>
                  <img className="project-image" src={image} alt={alt} />
                  <h3 className="title">{title}</h3>
                  <p className="desc">{desc}</p>
                  <div className="stack">
                    <h4 className="stackTitle">Stack</h4>
                    <ul className="tag-list">
                      {tags.map((tag, i) => (
                        <li className="tag-list-item" key={i}>
                          {tag}
                        </li>
                      ))}
                    </ul>

                    <div className="btn-wrap">
                      <div className="btn" href={source}>
                        Code
                      </div>
                      <div className="btn" href={visit}>
                        Website
                      </div>
                    </div>
                  </div>
                </div>
              )
            )}
          </div>
        </div>
      </div>
    </>
  );
};

export default Projects;

I can't seem to see what's missing. Any help would be truly grateful!

Answer 1

Unless your files public folder, you need to let webpack include it in the bundle, therefore you should use import / require with its path:

// image === "../../images/mayhemds.png"
<img className="project-image" src={require(image)} alt={alt} />

It explained in CRA docs .