public directory css url
See original GitHub issueDescribe the bug
When trying to import a image using the url method in a css/sass file the path no longer resolves to include the public directory using the prefix /
Did you try recovering your dependencies?
Yes
Which terms did you search for in User Guide?
Environment
current version of create-react-app: 4.0.0
running from /Users/jfay/.npm/_npx/12069/lib/node_modules/create-react-app
System:
OS: macOS 10.15.7
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
Node: 12.18.3 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.14.6 - /usr/local/bin/npm
Browsers:
Chrome: 86.0.4240.75
Edge: Not Found
Firefox: 80.0
Safari: 14.0
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: ^4.0.0 => 4.0.0
npmGlobalPackages:
create-react-app: Not Found
Steps to reproduce
- Start with a generic cra w/ react-scripts@4.0.0
- Open App.css
- Set the background to use an image resolved to the public url
.App {
text-align: center;
background-image: url("/logo192.png");
}
Expected behavior
Prior to upgrading to react-scripts@latest version 3.4.3 resolved images referenced in css files to include the public directory.
Actual behavior
Issue Analytics
- State:
- Created 3 years ago
- Reactions:84
- Comments:73 (13 by maintainers)
Top Results From Across the Web
Reference file in public folder from CSS in create-react-app
url () is a css function and the browser interprets the result based on the browsers understanding of the location of the css...
Read more >Using the Public Folder - Create React App
To reference assets in the public folder, you need to use an environment variable called PUBLIC_URL . Inside index.html , you can use...
Read more >React JS Image not loaded from public folder in css
But to find the images folder, you first have to go one level up. Then you have to go into public to find...
Read more >How to set a background image from the public folder in React
create-react-app cli stores /public folder url as an environment variable 'PUBLIC_URL', which is accessible across the JSX files inside the /src ...
Read more >Pointing CSS background image to the correct folder - Laracasts
In CSS when I have background: url('img/background1.jpg');. my CSS file is placed under public/img/ and now I realize that I've been assuming 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 FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
Top Related Hashnode Post
No results found
Top GitHub Comments
I was about to make report the same issue. Though I’m trying to update from 3.4.3 to 4.0
I am experiencing the same issue. I am using 17.0.1 react version. Is there a workaround to reach public folder inside css file?