img src={require()} not working with json in React

Question

Thank you for reading this. I'm new to React, and I am having problem importing images from local folder.

import jobData from './data.json';

function Job(){
      return (
        <div className="jobList">
        {jobData.map((data)=>(
            <div className="job" key={data.id}>
                <div className="logo"> 
                    //////////// PROBLEM HERE //////////////
                    {console.log("LOGO PATH:"+data.logo)}
                    <img src={require('./images/photosnap.svg').default}/>
                    <img src={require(data.logo).default} alt={data.company + " logo"}/>
                    //////////// PROBLEM HERE //////////////
                </div>
            </div>
        ))
        }
    </div>
    )
  }

export default Job;

I wonder why

works but

doesn't work even though I double checked by console.log that the first data.logo surely is './images/photosnap.svg'.

'./data.json' is like this:

[
  {
    "id": 1,
    "company": "Photosnap",
    "logo": "./images/photosnap.svg",
    "new": true,
    "featured": true,
    "position": "Senior Frontend Developer",
    "role": "Frontend",
    "level": "Senior",
    "postedAt": "1d ago",
    "contract": "Full Time",
    "location": "USA Only",
    "languages": ["HTML", "CSS", "JavaScript"],
    "tools": []
  },
  {
    "id": 2,
    "company": "Manage",
    "logo": "./images/manage.svg",
    "new": true,
    "featured": true,
    "position": "Fullstack Developer",
    "role": "Fullstack",
    "level": "Midweight",
    "postedAt": "1d ago",
    "contract": "Part Time",
    "location": "Remote",
    "languages": ["Python"],
    "tools": ["React"]
  },
///...and more

According to other sources, react require() only takes a static path and not a variable. You could create a js file containing an object with all the names as keys and the require() as values. Then import that file and when mapping through the data just select LogoImages[data.name] for the source — Ryan Zeelie
– Ryan Zeelie, Commented Jul 18, 2022 at 6:11

Ryan Zeelie · Accepted Answer · 2022-07-18 06:26:18Z

1

Require needs a static path

Option #1

Images.js

    export default{
    company: require("./images/manage.svg"),
    Photosnap: require("./images/photosnap.svg")
    }

In your component

import images from './images.js'

 {jobData.map((data) => (
        <div className="job" key={data.id}>
          <div className="logo">
            <img
              src={images[data.company]}
              alt={data.company + " logo"}
            />
          </div>
        </div>
      ))}

Option #2

Alternatively, change the path to just the name in your json which should work

  "logo": "photosnap.svg",

  {jobData.map((data) => (
        <div className="job" key={data.id}>
          <div className="logo">
            <img
              src={require(`./images/${data.logo}`)}
              alt={data.company + " logo"}
            />
          </div>
        </div>
      ))}

edited Jul 18, 2022 at 6:26

answered Jul 18, 2022 at 6:15

Ryan Zeelie

1,5307 silver badges13 bronze badges

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

1 Comment

Juyeon Over a year ago

Second option works for me. Thank you so much!!

Aakash Limbani · Accepted Answer · 2022-07-18 06:47:26Z

0

you try to handle the promise function on the tag that's why you getting the error. For that handle, you have to use a direct URL like this

//////////// Problem Solved //////////////
{console.log("LOGO PATH:"+data.logo)}
<img src={`${base_url}/images/photosnap.svg`}/>
<img src={`${base_url}/${data.logo}`} alt={`${data.company} logo`}/>
//////////// Problem Solved //////////////

answered Jul 18, 2022 at 6:47

Aakash Limbani

1531 gold badge1 silver badge9 bronze badges

Collectives™ on Stack Overflow

img src={require()} not working with json in React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related