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

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!

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");

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.

What changes are planned in this regard?

any progress on this? i just spent too many hours figuring why my app won’t suddenly compile after upgrading react scripts

Hey for quick fix you can use craco (https://github.com/gsoft-inc/craco/tree/master/packages/craco)

install per instructions. In my case im using .cracorc file.

Put this inside .cracorc: module.exports = { reactScriptsVersion: "react-scripts", style: { css: { loaderOptions: () => { return { url: false } } } } }

Save, when launched with changed package.json (see craco install instructions) with CRA 4.0 .scss properly resolves from public just like before

Is there no better fix than using yet another package with yet another configuration file?

Moving my assets into src doesn’t work (and I don’t like the idea anyway), whether I use url(“/aze”), url(“./aze”) or url(“aze”). I’m going to try downgrading now but this sucks.

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

Closing in on almost 36 months since this issue was opened. I would be interested in creating a pull request to resolve this but am not sure where to start, any recommendations on how I could begin to get this fixed?

I ran into this issue too. I was previously using something like: background: #000 url("/images/bg/bg.jpg") repeat;

Inside of /src/App/app.css. I ended up moving all the static/global CSS files I use to /public/css/* instead and use them in /public/index.html like so:

<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/slate.css">  
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/SlateOverrides.css">

Now all my static CSS files sit inside the public folder and in my actual App I use JS imports / styled components to style everything else. This seems to be the intended best practice.

@pascalstr Thanks that works for me!