Problem loading images from object file in react

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!

Dennis Vash · Accepted Answer · 2021-06-25 13:15:05Z

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.

answered Jun 25, 2021 at 13:15

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mayhemds Over a year ago

So Are you saying I can't do it from an object file?

Dennis Vash Over a year ago

there is no such file "../../images/mayhemds.png" after bundling, you need to specify it, see examples in docs

Collectives™ on Stack Overflow

Problem loading images from object file in react

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related