Problem with relative path when deploying react app to a subfolder in GitHub pages
up vote
0
down vote
favorite
I have a react app with this project structure:
In my Home component and About component I have two images
With src set to : <img src="/img/charlie1.jpg" alt="charlie home pic" />
and <img src="/img/charlie2.jpg" alt="charlie about pic" />
So I assume it will start looking in the root folder then the image folder then find the pictures in there.
This works fine when I’m developing on my local machine
The images will display correctly.
But when I build it and move the files to prod the images won’t work
It looks for the image at this path: https://xyz.github.io/img/charlie2.jpg instead of https://xyz.github.io/charlieReact/img/charlie2.jpg
How can I fix this problem?
If I change the image src to : <img src="./img/charlie1.jpg" alt="charlie home pic" />
Then it works in github pages, but then the images won’t display when I’m on my local machine…
reactjs
asked Nov 9 at 21:49
psj01
9821225
add a comment |
up vote
0
down vote
favorite
I have a react app with this project structure:
In my Home component and About component I have two images
With src set to : <img src="/img/charlie1.jpg" alt="charlie home pic" />
and <img src="/img/charlie2.jpg" alt="charlie about pic" />
So I assume it will start looking in the root folder then the image folder then find the pictures in there.
This works fine when I’m developing on my local machine
The images will display correctly.
But when I build it and move the files to prod the images won’t work
It looks for the image at this path: https://xyz.github.io/img/charlie2.jpg instead of https://xyz.github.io/charlieReact/img/charlie2.jpg
How can I fix this problem?
If I change the image src to : <img src="./img/charlie1.jpg" alt="charlie home pic" />
Then it works in github pages, but then the images won’t display when I’m on my local machine…
reactjs
asked Nov 9 at 21:49
psj01
9821225
May I ask why you don't want to import the images in the JavaScript, i.e.import charlie1 from './charlie1.jpg'? Do you have too many images? Maybe this could work.
– Tholle
Nov 9 at 22:01
Ah! that worked. Is that how it should be done?
– psj01
Nov 9 at 22:08
1
It's a good idea to import the images into the JavaScript and use the imported variable whenever you can, and the URLs will just work by themselves. If your page has a root other than/and you have assets in thepublicdirectory, you most likely have to do some extra logic in the code.
– Tholle
Nov 9 at 22:12
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a react app with this project structure:
In my Home component and About component I have two images
With src set to : <img src="/img/charlie1.jpg" alt="charlie home pic" />
and <img src="/img/charlie2.jpg" alt="charlie about pic" />
So I assume it will start looking in the root folder then the image folder then find the pictures in there.
This works fine when I’m developing on my local machine
The images will display correctly.
But when I build it and move the files to prod the images won’t work
It looks for the image at this path: https://xyz.github.io/img/charlie2.jpg instead of https://xyz.github.io/charlieReact/img/charlie2.jpg
How can I fix this problem?
If I change the image src to : <img src="./img/charlie1.jpg" alt="charlie home pic" />
Then it works in github pages, but then the images won’t display when I’m on my local machine…
reactjs
asked Nov 9 at 21:49
psj01
9821225
I have a react app with this project structure:
In my Home component and About component I have two images
With src set to : <img src="/img/charlie1.jpg" alt="charlie home pic" />
and <img src="/img/charlie2.jpg" alt="charlie about pic" />
So I assume it will start looking in the root folder then the image folder then find the pictures in there.
This works fine when I’m developing on my local machine
The images will display correctly.
But when I build it and move the files to prod the images won’t work
It looks for the image at this path: https://xyz.github.io/img/charlie2.jpg instead of https://xyz.github.io/charlieReact/img/charlie2.jpg
How can I fix this problem?
If I change the image src to : <img src="./img/charlie1.jpg" alt="charlie home pic" />
Then it works in github pages, but then the images won’t display when I’m on my local machine…
reactjs
reactjs
asked Nov 9 at 21:49
psj01
9821225
asked Nov 9 at 21:49
psj01
9821225
asked Nov 9 at 21:49
psj01
9821225
asked Nov 9 at 21:49
psj01
9821225
asked Nov 9 at 21:49
psj01
9821225
9821225
May I ask why you don't want to import the images in the JavaScript, i.e.import charlie1 from './charlie1.jpg'? Do you have too many images? Maybe this could work.
– Tholle
Nov 9 at 22:01
Ah! that worked. Is that how it should be done?
– psj01
Nov 9 at 22:08
1
It's a good idea to import the images into the JavaScript and use the imported variable whenever you can, and the URLs will just work by themselves. If your page has a root other than/and you have assets in thepublicdirectory, you most likely have to do some extra logic in the code.
– Tholle
Nov 9 at 22:12
add a comment |
May I ask why you don't want to import the images in the JavaScript, i.e.import charlie1 from './charlie1.jpg'? Do you have too many images? Maybe this could work.
– Tholle
Nov 9 at 22:01
Ah! that worked. Is that how it should be done?
– psj01
Nov 9 at 22:08
1
It's a good idea to import the images into the JavaScript and use the imported variable whenever you can, and the URLs will just work by themselves. If your page has a root other than/and you have assets in thepublicdirectory, you most likely have to do some extra logic in the code.
– Tholle
Nov 9 at 22:12
May I ask why you don't want to import the images in the JavaScript, i.e.
import charlie1 from './charlie1.jpg'? Do you have too many images? Maybe this could work.– Tholle
Nov 9 at 22:01
May I ask why you don't want to import the images in the JavaScript, i.e.
import charlie1 from './charlie1.jpg'? Do you have too many images? Maybe this could work.– Tholle
Nov 9 at 22:01
Ah! that worked. Is that how it should be done?
– psj01
Nov 9 at 22:08
Ah! that worked. Is that how it should be done?
– psj01
Nov 9 at 22:08
1
1
It's a good idea to import the images into the JavaScript and use the imported variable whenever you can, and the URLs will just work by themselves. If your page has a root other than
/ and you have assets in the public directory, you most likely have to do some extra logic in the code.– Tholle
Nov 9 at 22:12
It's a good idea to import the images into the JavaScript and use the imported variable whenever you can, and the URLs will just work by themselves. If your page has a root other than
/ and you have assets in the public directory, you most likely have to do some extra logic in the code.– Tholle
Nov 9 at 22:12
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
It's a good idea to import the images into the JavaScript and use the imported variable whenever you can, and the URLs will just work by themselves.
import charlie1 from './charlie1.jpg';
<img src=charlie1 />
If your page has a root other than / and you have assets in the public directory, you most likely have to do some extra logic in the code.
package.json
"homepage": "https://xyz.github.io/charlieReact"
App.js
<img src=`$process.env.PUBLIC_URL/img/charlie1.jpg` />
answered Nov 9 at 21:53
Tholle
33k53558
I already have that in my package.json file
– psj01
Nov 9 at 21:53
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
It's a good idea to import the images into the JavaScript and use the imported variable whenever you can, and the URLs will just work by themselves.
import charlie1 from './charlie1.jpg';
<img src=charlie1 />
If your page has a root other than / and you have assets in the public directory, you most likely have to do some extra logic in the code.
package.json
"homepage": "https://xyz.github.io/charlieReact"
App.js
<img src=`$process.env.PUBLIC_URL/img/charlie1.jpg` />
answered Nov 9 at 21:53
Tholle
33k53558
I already have that in my package.json file
– psj01
Nov 9 at 21:53
add a comment |
up vote
0
down vote
It's a good idea to import the images into the JavaScript and use the imported variable whenever you can, and the URLs will just work by themselves.
import charlie1 from './charlie1.jpg';
<img src=charlie1 />
If your page has a root other than / and you have assets in the public directory, you most likely have to do some extra logic in the code.
package.json
"homepage": "https://xyz.github.io/charlieReact"
App.js
<img src=`$process.env.PUBLIC_URL/img/charlie1.jpg` />
answered Nov 9 at 21:53
Tholle
33k53558
I already have that in my package.json file
– psj01
Nov 9 at 21:53
add a comment |
up vote
0
down vote
up vote
0
down vote
It's a good idea to import the images into the JavaScript and use the imported variable whenever you can, and the URLs will just work by themselves.
import charlie1 from './charlie1.jpg';
<img src=charlie1 />
If your page has a root other than / and you have assets in the public directory, you most likely have to do some extra logic in the code.
package.json
"homepage": "https://xyz.github.io/charlieReact"
App.js
<img src=`$process.env.PUBLIC_URL/img/charlie1.jpg` />
answered Nov 9 at 21:53
Tholle
33k53558
It's a good idea to import the images into the JavaScript and use the imported variable whenever you can, and the URLs will just work by themselves.
import charlie1 from './charlie1.jpg';
<img src=charlie1 />
If your page has a root other than / and you have assets in the public directory, you most likely have to do some extra logic in the code.
package.json
"homepage": "https://xyz.github.io/charlieReact"
App.js
<img src=`$process.env.PUBLIC_URL/img/charlie1.jpg` />
answered Nov 9 at 21:53
Tholle
33k53558
edited Nov 9 at 22:28
answered Nov 9 at 21:53
Tholle
33k53558
answered Nov 9 at 21:53
Tholle
33k53558
answered Nov 9 at 21:53
Tholle
33k53558
33k53558
I already have that in my package.json file
– psj01
Nov 9 at 21:53
add a comment |
I already have that in my package.json file
– psj01
Nov 9 at 21:53
I already have that in my package.json file
– psj01
Nov 9 at 21:53
I already have that in my package.json file
– psj01
Nov 9 at 21:53
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53233668%2fproblem-with-relative-path-when-deploying-react-app-to-a-subfolder-in-github-pag%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
May I ask why you don't want to import the images in the JavaScript, i.e.
import charlie1 from './charlie1.jpg'? Do you have too many images? Maybe this could work.– Tholle
Nov 9 at 22:01
Ah! that worked. Is that how it should be done?
– psj01
Nov 9 at 22:08
1
It's a good idea to import the images into the JavaScript and use the imported variable whenever you can, and the URLs will just work by themselves. If your page has a root other than
/and you have assets in thepublicdirectory, you most likely have to do some extra logic in the code.– Tholle
Nov 9 at 22:12