can somebody tell me the correct path for this image?

I tried:
<img src="../hero-img.jpg" alt="Hero image">
<img src="./images/hero-img.jpg" alt="Hero image">
<img src="../images/hero-img.jpg" alt="Hero image">
<img src="/images/hero-img.jpg" alt="Hero image">
<img src="images/hero-img.jpg" alt="Hero image">
<img src="../public/images/hero-img.jpg" alt="Hero image">
<img src="./public/images/hero-img.jpg" alt="Hero image">
<img src="./public/images/hero-img.jpg" alt="Hero image">
<img src="public/images/hero-img.jpg" alt="Hero image">

but nothing work.
hero-img:1 GET http://localhost:8081/images/hero-img 404 (Not Found)

SvenSplynter•3/27/24, 12:07 PM

<img src="../public/images/hero-img.jpg" alt="Hero image"> should work

Ἔ

ἔρως•3/27/24, 12:38 PM

you have the public folder inside the src folder, for some reason, so, the path is

narOP•3/27/24, 12:54 PM

neither of it work. However, if i change the image folder into direct children of public, it's working. I'm still don't understand what happened

<img class=".hero-bg" src="./hero-img.jpg" alt="Hero image">

Ἔ

ἔρως•3/27/24, 1:40 PM

well, i see what it os

Ἔ

ἔρως•3/27/24, 1:40 PM

Ἔ

ἔρως•3/27/24, 1:41 PM

it's actually /dist/src/public/images/hero-image.jpg

Ἔ

ἔρως•3/27/24, 1:42 PM

this assumes the server runs in the projek4 folder

Choo♚𝕂𝕚𝕟𝕘•3/27/24, 3:58 PM

Are you sure that the public folder is being served? It is common to have a static assets folder named "public", but this is not always configured automatically. Using something like Vite can make that automatic. If you are not using any build tool like that, it might be necessary to configure the server to serve the static assets.

Ἔ

ἔρως•3/27/24, 4:19 PM

it depends on the server

Ἔ

ἔρως•3/27/24, 4:19 PM

which is an unknown to us

Kevin Powell•3/27/24, 4:33 PM

I'm with ChooKing... normally the public folder isn't in the src folder. Depends on what you're using though...

I'd move my public folder outside of src, and then have the path as and see what happens

Ἔ

ἔρως•3/27/24, 5:03 PM

i believe it was misconfigured

Ἔ

ἔρως•3/27/24, 5:04 PM

but in the screenshot, everything is inside the dist folder

Kevin Powell•3/27/24, 5:21 PM

folder looks empty to me, but if this is Vite, that's normal unless you build for production anyway.

Ἔ

ἔρως•3/27/24, 5:27 PM

you're right, it's just empty

narOP•3/28/24, 4:25 AM

Sorry for late response

I am using webpack for bundle and tried to make PWA, the dist is a production result and src is dev folder.

For context, actually this path is work fine until i am using sharp.js for responsive picture/img. The prod is fine but the dev mode somehow cannt find the img.

<img src="./images/hero-img.jpg" alt="Hero image">

I thought it might not the path fault because the dev mode work when i change the img location and more of maybe network, cache, or something doing magic trick.

Kevin Powell•3/28/24, 1:09 PM

I've never used sharp.js, do you need to configure where it's outputting the images to though? If it worked until you added that, it's where the issues are coming from.

Normally, you get issues where something works in dev, but not production, not the other way around... but I also don't have experience with webpack... might be something in the config with webpack and sharp?

narOP•3/29/24, 7:03 PM

Yeah, sharp need to configure the source and destination. Perhaps it cause an error or maybe just my laptop had some issue. When i ran npm it got 31 vulnerability maybe that's it

Kevin Powell•3/30/24, 12:42 AM

Npm audit fix in those situations

narOP•3/30/24, 4:29 AM

Already did even --force but still cannt fix that dunno why