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
<img src={require('./images/photosnap.svg').default}/>
works but
<img src={require(data.logo).default} alt={data.company " logo"}/>
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
CodePudding user response:
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>
))}
CodePudding user response:
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 //////////////