React image path

Question

I have folder structure like:

I have 2 code:

components > cards.js

<img src="path here" />

App.css

background-image: url("./images/img-1.jpg");

questions. Why the example 1 can access the public folder while 2 can't?

need more info about your question, it is not well explained. Thanks — Zia
– Zia, Commented Sep 1, 2021 at 8:15

John · Accepted Answer · 2021-09-01 08:15:49Z

1

Because the path url("./images/img-1.jpg") is a relative file, not a url. Change it to url("/images/img-1.jpg") or url("<base_href>/images/img-1.jpg") if you're behind a reverse proxy.

answered Sep 1, 2021 at 8:15

John

1,2949 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Septiana Yoga Over a year ago

Hi, I just try your answer; but the error still the same. Error: Can't resolve '/images/img-2.jpg'

John Over a year ago

As a runtime console error or a build error?

John Over a year ago

I just noticed you have two image folders. Is img-1.jpg in src/images/ or public/images/?

Septiana Yoga Over a year ago

My bad, just imagine the src/images doesnt exist. I dont know which error is it. Like I try to access 1 image; 1.access from js file 2.access from css file..

John Over a year ago

How do you get the error to prompt? Do you get it on npm start or when visiting the site you see it in console logs?

Collectives™ on Stack Overflow

React image path

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related