Create React App 4.0 cannot resolve image path in public folder

user_2564566 0
Viewed 5793

I have upgraded to the latest Create React App 4.0. Now the scss cannot resolve image assets in the public folder. I was using CRA 3.4.1 before. It worked fine.

Any ideas? I don't want to use npm eject

The icon.svg is in public/images

background-image: url(/images/icon.svg);

Failed to compile.

./src/Components/style.scss 
(./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!
./node_modules/postcss-loader/src??postcss!
./node_modules/resolve-url-loader??ref--5-oneOf-6-3!
./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!
./src/Components/style.scss)
Error: Can't resolve '../../../../../../icon.svg' in ''

In Create React App 3.x, referencing an image from the public folder in (S)CSS worked by simply using a starting slash, as has been been answered here.

As the OP has explained, the image is in public/images and is being referenced as url(/images/icon.svg).

This doesn't work in Create React App 4.0.0 anymore and gives the error message Error: Can't resolve '../../../../../../icon.svg' in ''. The changelog of Create React App doesn't mention a breaking change regarding the public folder.

create-react-app webpack reactjs
3 Answers

I think it is deprecated in CRA 4, (after all.. it was a breaking change..) there are some workarounds using craco but I suggest to move these files to the src folder.

user_138861500

Try to change to this: (webpack should resolve this to the 'real' path)

background-image: url(./icon.svg);

I know you wanted to add the image as a background-image css property, but maybe another approach is relevant for you.
When you import like this you use it exactly as you would use a normal Component:

import { ReactComponent as Icon } from'<path_to_resource>/images/icon.svg';

<Icon />

Source: https://create-react-app.dev/docs/adding-images-fonts-and-files/

user_42559780

As a temporary workaround, you could move the images into src/, import them directly in the components import myImage from '../file.svg' and set style={{ backgroundImage: file }}>?

user_29766010
Related