How to change image url for subfolder projects?

[codestitch]

Hi.

In my HeaderComponent (located in src/components/navigation/) this is what it looks like when i include an image from images folder let yeomanImage = require('../../images/logo.png'); then use it <img className='img-header' src={yeomanImage}/>. It runs fine in dev server.

Now when I compiled my project to production. I changed my index.html in /dist folder from <script type="text/javascript" src="/assets/app.js"></script> to this <script type="text/javascript" src="./assets/app.js"></script>.

When I run the compiled project it can't seem to find the image.

How do I change my require in getting the image?

Thanks for your help.

Cheers!

[stylesuxx]

Hey,
can you tell me which URL is used for the src tag of the image on prod?

Will need to take a look at this.

[raza2022]

@codestitch have you soled it?
@stylesuxx i stuck with same situation and tried many solution but none of these works
reproduce i have a image named graph-left_03.png in my images folder
i tried 3 way all working in serve but not in direct dist

• just give it <img src="images/graph-left_03.png" /> not working in dist

• //images link
  const graphLeft3 = require('../../images/graph-left_03.png');
<img src={graphLeft3} /> still not working in dist

• i just copied the images folder in dist but it also want resolve with both ./ and ./../
  Thanks

[codestitch]

Hi. since my project is deployed in sub folder here are the following changes that i did for the images to work properly.

1. Go to

cfg/default.js

and change publicPath: '/assets/', to publicPath: './assets/',

2. After running npm run dist change index.html in

dist/index.html

from src="/assets/app.js" to src="./assets/app.js"

[raza2022]

@codestitch Thanks i just added ./ after making dist in every link (two one for favicon and one app.js)