CRA 4 fails to compile when css background-image ulr('url') not resolved
See original GitHub issueI 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
Issue Analytics
- State:
- Created 3 years ago
- Reactions:22
- Comments:17
Top Results From Across the Web
Create React App 4.0 cannot resolve image path in public folder
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...
Read more >How to fix CSS background-image not working | HTML/CSS
1. Check that your CSS file is linked correctly in your HTML file. · 2. Make sure the image path is set correctly...
Read more >Cannot add background image URL in CSS : r/reactjs - Reddit
Not entirely true. An image loader and file loader is needed, yes, but you do not have to explicitly import it. The CSS...
Read more >React Background Image Tutorial – How to Set ...
How to Set a Background Image in React Using an External URL If your ... to Compile" error and stop the build when...
Read more >An elegant solution of deploying React app into a subdirectory
Let's start with an obvious statement: React application deployed to a subfolder will not work out of the box: The reason for that...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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!
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.