This is my first post so apologies if there is any vital info missing.
I am building a webpage with react. I'm trying to populate a page on my webpage by mapping over a relatively simple JSON file.
Everything is populating fine except for the image. I am trying to use relative file paths for the image source, but everything I have tried so far just results in a broken image icon.
So far I have tried troubleshooting by putting an image url from the internet in the JSON which works fine.
Here is my react code:
{Services.map((item) => {
return (
<Fragment>
<li className="services-item">
<img
src={item.image}
className="services-item-img"
/>
<div className="services-item-text">
<div className="h1">{item.title}</div>
<div className="p1">{item.paragraph}</div>
</div>
</li>
<div className="diamonds-container">
<img src={Diamonds} className="diamonds" />
</div>
</Fragment>
);
})}
and here is my JSON file:
[
{
"title": "DESIGN & WEB",
"paragraph": "Brand consistancy and agility are important, which is why we do it all in one place. We want to make this complex task as simple as possible for everyone we work with.",
"image": "../images/pen.svg"
},
{
"title": "MOTION DESIGN",
"paragraph": "Our talent pool has a long history in the motion design world. From creating graphics for New Zealand's largest broadcast outlets, to animating content for hugely succesful YouTube channels across the globe.",
"image": "../images/keyframe.svg"
},
{
"title": "PHOTO & VIDEO",
"paragraph": "Photography, film and video is a long term passion of ours. Every photography or video project that we have been a part of, takes with it a part of our heart and soul.",
"image": "../images/video.svg"
}
]
Here is a screenshot of my folder structure too if it's helpful: Project Folder Structure:
Thank you!
put the image folder inside the public folder and edit the image property like this "./images/video.svg"
Why this work
Because in the browser it is the public/index.html file that get rendered so you have to add image assets relative to the public folder