Unable to load certain images after Build in ReactJS (served with github)

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!

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