I am trying to launch my website on github. After running npm run build
, everything loads as expected when calling serve -s build
. However when hosted on github, see website, I am unable to load the portfolio images. Strangely, I am able to access the files associated with each project.
Here is my ReactJS:
if(this.props.data){ var projects = this.props.data.projects.map(function(projects){ return <div key={projects.title} className="columns portfolio-item centreColumn"> <div className="item-wrap"> <a href={projects.url} target="_blank" rel="noreferrer noopener" title={projects.title}> <img alt={projects.title} src={projects.image} /> <div className="overlay"> <div className="portfolio-item-meta"> <h5>{projects.title}</h5> <p>{projects.category}</p> </div> </div> <div className="link-icon"><i className="fa fa-link"></i></div> </a> </div> </div> }) }
and the json:
"portfolio": { "projects": [ { "title": "Blah", "category": "blah blah", "image": "images/myImage.png", "url": "https://example.com" },
The files
and images
are stored in the public folder
.
A few things I have tried:
- Different browsers
- Removing subfolders to root of
public
folder. - Trying folder traversing like
../images/myImage.png
etc. - Trying
src={require(projects.image).default}
.
Any suggestions much appreciated – I am impatient to get it up and running!
Advertisement
Answer
the problem is in path it’s supposed to be .PNG capital i saw your image in github repo it’s .PNG not .png
you have to change .PNG in github repo to be .png