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

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

[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!

[sagar7993]

I’m surprised that more people haven’t realised that this is a major concern for SEO.

Lets say that you have a image file within the src folder, and you’re using it within your CSS file like this -

.Profile { text-align: center; background-image: url(“…/…/images/user/profile.png”); }

If this profile.png file is inside the src > images > user directory, then while creating a build with react-scripts, the URL generated for this file will be something like this -

https://{my-domain.com}/static/media/profile.{hash}.jpg

This {hash} value changes with every build. Therefore, if you use this in a static website, and if your website is crawled by google bot, you may see 404’s reported in the google search console the next time you deploy, because Google can take several weeks before indexing your site again.

This is where an image in the public folder would have helped, because that URL will never change, and can safely remain indexed in search engines.