Can't resolve '/images/img-2.jpg' in 'E:\React\react-demo\src'

5
votes

Here is my code i am trying to add image but its shows error

background-image: url('/images/img-2.jpg');

Failed to compile.

./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css) Error: Can't resolve '/images/img-2.jpg' in 'E:\React\react-demo\src'

1
javascripthtmlcssreactjs

1 Answers

6
votes

Because you asked for an image not founded in the src folder! maybe you're trying to access the images in the public folder at your React project.

My Friend's life is easy, React - using Webpack - converts the jpg/png..etc images to base64 then replaces the URL to the base64... like this

enter image description here

So, you need to make an assets folder 📁 inside the src folder that contains all your images, then import the link in your CSS

  background-image: url("./assets/logo512.png");

Again, React will convert the image to bases64! That will make the image not depend on the folder Path.