React CSS can't use image from public

Question

I create a project with create-react-app project_name, and then I tried to use a image from public folder as background with this code in css background-image: url('/images/ernestDrum.jpeg');

and then I got this error ./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/ernestDrum.jpeg' in 'E:\project\ernest\src' in my previous project, I use the same code and it's works

you are probably calling the image from the wrong directory or the image is in the wrong directory itself. Could you share your file tree for us to see? — Halmon
– Halmon, Commented Oct 31, 2020 at 20:21

JBallin · Accepted Answer · 2020-10-31 20:22:18Z

2

CRA Docs - Using the Public Folder:

...we normally encourage you to import assets in JavaScript files instead.

CRA Docs - Adding Images, Fonts, and Files:

You can import a file right in a JavaScript module.

CRA does provide a way to use the public folder (1st link), but I would instead recommend placing images directly in /src (you could still use an /images folder). CRA's webpack set up will handle the rest. Note that you'll want to use a relative import:

background-image: url('./images/ernestDrum.jpeg');

answered Oct 31, 2020 at 20:22

JBallin

9,9654 gold badges52 silver badges63 bronze badges

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

Comments

Dragonite · Accepted Answer · 2021-07-23 02:23:51Z

1

I got same error after updating react-scipts from 3.x.x to 4.x.x
and found this issue https://github.com/facebook/create-react-app/issues/9870

Roll back to 3.x.x can solve this problem

answered Jul 23, 2021 at 2:23

Dragonite

444 bronze badges

Collectives™ on Stack Overflow

React CSS can't use image from public

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related