How to import images properly into an array in React

Question

I have some images in my project folder and want to either use their relative links to show them in each respective array item.

I want to eventually use the image in a react component to show the image on my webpage.

File Structure

src
- assets
  - data
    - project.js
    - projectImages.js
  - images
    - img.jpg
    - img2.jpg
    - img3.jpg
- components
  - Project.jsx

Project.jsx

export default function Project({ project, theme }) {
  return (
    <div id="project">
      <h3 className="subheading">{project.name}</h3>
      <div>
        <img src={project.img}>
      </div>
    </div>
  );
}

project.js

// import projectImages from '../data/projectImages' (tried to import an array of img)

module.exports = [
  {
    type: "",
    name: "",
    desc: "",
    tech: ["", "", "", ""],
    summary: "",
    year: ,
    img: '../data/images/img.jpg', // tried projectImages[0]
    link: "",
  },
  {
    ...
    img: '../data/images/img2.jpg', // tried projectImages[1]
    ...
  },
  {
    ...
    img: '../data/images/img3.jpg', // tried projectImages[2]
    ...
  },

I have tried to import img from '../data/projectImages/img.jpg but the variable was not accepted in the object array. I have also tried to shove the images into an array and use the array to reference them but that did not work as well.

I believe you will need a JSON/YAML manifest that lists all the assets by their name, so you can reference their paths dynamically. React does not understand how a directory works like your file system. If this was a Node server, you could list files in the directory, but since React is a client-side application, it cannot know what the system looks like unless you tell it. — Mr. Polywhirl
– Mr. Polywhirl, Commented Oct 9, 2023 at 17:35
The answer to this depends upon the build system that you are using. create-react-app? vite? Something else? — spender
– spender, Commented Oct 9, 2023 at 17:44
@Mr.Polywhirl Could you give me an example of what a JSON manifest would look like in the context of my application? I am having a hard time making sense of the resources online — SunghunP
– SunghunP, Commented Oct 9, 2023 at 17:51
@Mr.Polywhirl webpack does indeed support this kind of scenario — spender
– spender, Commented Oct 9, 2023 at 18:01

spender · Accepted Answer · 2023-10-09 18:00:44Z

0

You are using create-react-app which uses webpack behind the scenes.

It's been a while since I did this, but I believe that you can do something like:

const myRequireContext = require.context('./someDir', false, /\.jpg$/);

which will give you an object that looks something like:

{
  "./img.jpg": "some/path",
  "./img2.jpg": "some/otherPath",
  "./img3.jpg": "some/yetAnotherPath"
}

(this is off-the-top-of-my-head, so details might be a little different)

See https://webpack.js.org/guides/dependency-management/#require-with-expression

answered Oct 9, 2023 at 18:00

spender

121k36 gold badges245 silver badges369 bronze badges

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

1 Comment

SunghunP Over a year ago

Thank you this worked! I used const myRequireContext = require.context('../images', false, /\.jpg$/); in the top level of my projects.js file and img: myRequireContext('./img.jpg') in my object array

zackrypaul · Accepted Answer · 2023-10-09 18:51:34Z

0

Directly inside your array, use require()

module.exports = [
  {
    type: "",
    name: "",
    desc: "",
    tech: ["", "", "", ""],
    summary: "",
    year: ,
    img: require('../data/images/img.jpg'), 
    link: "",
  },
  {
    ...
    img: require('../data/images/img2.jpg'), 
    ...
  },
  {
    ...
    img: require("'../data/images/img3.jpg", 
    ...
  },

answered Oct 9, 2023 at 18:51

zackrypaul

1296 bronze badges

Collectives™ on Stack Overflow

How to import images properly into an array in React

File Structure

Project.jsx

project.js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

File Structure

Project.jsx

project.js

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related