This is a bit of a weird one.
I'm working on a React app, and have some images in the public folder:
my-app/public/images {images in here}
And sure enough, in my React component I can access the images:
<img src='/images/img-1.jpg' />
I can also bring up the image in my browser:
http://localhost:3000/images/img-1.jpg
So far, so good.
But here is the weird bit...
In my CSS if I do background-image: url('/images/img-1.jpg'); I get: Error: Can't resolve '/images/img-1.jpg.
I've tried images/img-1.jpg, ../images/img-1.jpg, /public/images/img-1.jpg and all attempts result in the same error.
I've resolved it my creating a copy of the images in:
/src/src-images/...
And this works, but it means I have to have images in two locations. This can't be right:
background-image: url('src-images/img-1.jpg'}); // For CSS
<img src='/images/img-1.jpg' /> // For component
Does anyone know what either I am doing wrong, or do images have to be in two folders?!?
BTW, if I put the images only within the src folder the the Component code cannot access them!!
Thanks for your help.
