Create-react-app: CRA 4 fails to compile when css background-image ulr('url') not resolved

[a-tonchev]

I have a css file that is imported in my react app, it is something like:

styles.css

.flag { ... background-image: url("/img/flags.png") !important; }

It is imported in my react file -> import './styles.css';

In the previous version of CRA it works well, and when I build the app it was also okay, since I have the /img/flags.png in my 'public' directory.

After CRA 4 it fails to compile

Best regards

[pascalstr]

This guide still works: https://create-react-app.dev/docs/adding-images-fonts-and-files

You should not link to the public folder in your src or css. Create a static directory in your src folder and do like:

background-image: url("./static/img/flags.png");

[Saeed-Rohani]

@pascalstr, Your solution works, but I have to move all the assets that do not need to be in the src folder, such as images, videos, fonts, and so on. Also, all of these will beside together in the media folder that CRA created by default and is not customized for production.

[a-tonchev]

@pascalstr Thanks that works for me!

[pascalstr]

@Saeed-Rohani #9937 seems to be a similar issue, maybe close this in favour of #9973

[makis-spy]

This guide still works: https://create-react-app.dev/docs/adding-images-fonts-and-files

You should not link to the public folder in your src or css. Create a static directory in your src folder and do like:

background-image: url("./static/img/flags.png");

@Saeed-Rohani The guide makes sense but how would you reference an image in an inline style to do something like this:

style={{backgroundImage:"url(/img/example.png)"}}

in this case static will not work and the use case being...

style={{backgroundImage:"url(/img/example-"+var+".png)"}}

Cheers

[makis-spy]

I'm surprised this isn't a show stopper for more people. Any light on a work around or approach I'm not getting would be helpful.

Cheers!