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)
15 Replies
<img src="../public/images/hero-img.jpg" alt="Hero image"> should work
you have the public folder inside the src folder, for some reason, so, the path is
/src/public/images/hero-image.jpgneither 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">
well, i see what it os
is
it's actually /dist/src/public/images/hero-image.jpg
this assumes the server runs in the projek4 folder
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.
it depends on the server
which is an unknown to us
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
./images/hero-img.jpg and see what happensi believe it was misconfigured
but in the screenshot, everything is inside the dist folder
dist folder looks empty to me, but if this is Vite, that's normal unless you build for production anyway.you're right, it's just empty
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.
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?
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
Npm audit fix in those situations
Already did even --force but still cannt fix that dunno why