0

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!

Will Powell
  • 71
  • 8
  • If you're 100% sure the images are present and named correctly, the page may not be updating. I'd check your repo settings page for any build errors and to confirm it's building the correct branch. If so, you can try pushing an empty commit, or create and switch to a new branch to force GH pages to update. – Chris B. Jul 22 '22 at 15:09
  • Yes I have tested to see if it serving the latest build. The images are named correctly as they work in development. – Will Powell Jul 22 '22 at 15:29

1 Answers1

2

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

enter image description here

Kareem Hesham
  • 76
  • 3