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:
JavaScript
x
19
19
1
if(this.props.data){
2
var projects = this.props.data.projects.map(function(projects){
3
return <div key={projects.title} className="columns portfolio-item centreColumn">
4
<div className="item-wrap">
5
<a href={projects.url} target="_blank" rel="noreferrer noopener" title={projects.title}>
6
<img alt={projects.title} src={projects.image} />
7
<div className="overlay">
8
<div className="portfolio-item-meta">
9
<h5>{projects.title}</h5>
10
<p>{projects.category}</p>
11
</div>
12
</div>
13
<div className="link-icon"><i className="fa fa-link"></i></div>
14
</a>
15
</div>
16
</div>
17
})
18
}
19
and the json:
JavaScript
1
9
1
"portfolio": {
2
"projects": [
3
{
4
"title": "Blah",
5
"category": "blah blah",
6
"image": "images/myImage.png",
7
"url": "https://example.com"
8
},
9
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