Reference file in public folder from CSS in create-react-app

Question

I am using creat-react-app (CRA) and simply want to include a png file placed in the public folder via CSS (I keep all image files there). Now I am trying to reference this image via CSS (I only added the background-image line to a freshly generated CRA app):

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
  background-image: url("../public/example.png");
}

You attempted to import example.png which falls outside of the project src/ directory

How do I reference the image file from within the CSS-file without copying somewhere inside /src? I also don't want to eject the application and get rid of the error message.

Edit: This question is different from The create-react-app imports restriction outside of src directory because it does not show how to solve this problem at a CSS level. The proposed solution is to add the style inside the JavaScript file which I don't want to do.

Possible duplicate of The create-react-app imports restriction outside of src directory — Will Ru
– Will Ru, Commented Feb 17, 2018 at 13:26
I think there's one extra .. in the url(). I dunno how many times I've made the same mistake. — Faizuddin Mohammed
– Faizuddin Mohammed, Commented Feb 17, 2018 at 13:32
Does this answer your question? React path to public folder in css background image — user7610
– user7610, Commented Jan 16, 2021 at 6:01

DiamondDrake · Accepted Answer · 2021-03-07 05:03:38Z

31

Just use a / before the name, this will make it relative to the output root, which includes anything in the public folder (provided the finished hosted application is served at the root of a domain).

so for the question asked above:

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
  background-image: url("/example.png");
}

the critical part being

/example.png

refers to a file, example.png, that is in the public folder (served at the root level)

Could also be relative:

one could also use

./example.png

provided that the css file was also imported from the public/build directory, this would be relative to the css file and not depend on being served at the domain root, but typically in CRA webpack will bundle the CSS and it may or may not be loaded from this location. (you could import it in the html file directly using rel tag with the %PUBLIC_URL%/Styles.css macro)

edited Mar 7, 2021 at 5:03

answered Feb 17, 2019 at 20:03

DiamondDrake

1,17911 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rickerp Over a year ago

This won't do if your PUBLIC_URL is different than '/'

DiamondDrake Over a year ago

@rickerp relative urls depend on if the css is imported via webpack of if the css itself is loaded externally such as from the public folder. url() is a css function and the browser interprets the result based on the browsers understanding of the location of the css 'file'. Here leading it with a '/' makes it 'root relative' in most contexts (which is why it works in most situations regardless of how its imported, as long as the app is served from a root domain. you're correct that its possible that it won't work nested in a subdirectory.

Malay Patra Over a year ago

i have the same setup, still this doesnt work

Sasi Kumar M · Accepted Answer · 2020-11-28 17:36:24Z

3

In my case, to access the images from css/scss, had to move the images directory as well as fonts, to the src directory. After which i was able to refer them in the css/scss files directly,

 background-image: url("/images/background.jpg");

references:

https://github.com/facebook/create-react-app/issues/829

https://create-react-app.dev/docs/using-the-public-folder/

answered Nov 28, 2020 at 17:36

Sasi Kumar M

2,6501 gold badge26 silver badges26 bronze badges

1 Comment

James Hubert Over a year ago

Thanks you for your answer. I can see that the images are actually being found by my CSS file in CRA now (before I had my images folder in /public) and nothing was working. However my application still does not compile and I get the following error:

./src/App.css (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css) Error: Can't resolve '/images/img-2.jpg' in '/Users/jameshubert/Documents/Programming/100DaysOfReact/day-20-briandesign-react-website/src'

Joseph Merdrignac · Accepted Answer · 2022-01-31 12:45:21Z

1

there is a special page about the /public folder in the official documentation:
https://create-react-app.dev/docs/using-the-public-folder/

Here is how you should refer to the public folder:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

or

render() {
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

BUT, you can't use those solution in a css file. So you'll have to precise the ressource from the js files:

const MyComp = () => {
  return <div style={{ backgroundImage: `${process.env.PUBLIC_URL}/img/logo.png` }} />;
}

answered Jan 31, 2022 at 12:45

Joseph Merdrignac

3,9202 gold badges22 silver badges19 bronze badges

Comments

atazmin · Accepted Answer · 2022-03-11 19:35:41Z

1

I was using "public" folder but it says here to use images inside "src" folder:

https://create-react-app.dev/docs/using-the-public-folder/

"Normally we recommend importing stylesheets, images, and fonts from JavaScript."

answered Mar 11, 2022 at 19:35

atazmin

5,8651 gold badge41 silver badges31 bronze badges

Comments

Eric Ballard · Accepted Answer · 2023-01-30 19:49:46Z

1

Using the URL directly doesn't work for my environment, for me I needed to specify the path TO the image FROM the current directory.

eg;

/src/styles/style.css
cursor: url("../../public/images/image.png"), auto;


/src/public/images/image.png

answered Jan 30, 2023 at 19:49

Eric Ballard

11111 bronze badges

1 Comment

dougwig Feb 6 at 17:23

This worked for me from a css module to access the public folder.

Faizuddin Mohammed · Accepted Answer · 2018-02-17 13:56:57Z

0

Remove the extra .. in the relative path. :)

answered Feb 17, 2018 at 13:56

Faizuddin Mohammed

4,3786 gold badges32 silver badges55 bronze badges

5 Comments

Faizuddin Mohammed Over a year ago

There was two more dots when I answered. They were removed from the question for some reason.

Faizuddin Mohammed Over a year ago

Correct. One ..

maracuja-juice Over a year ago

Well that will give a build error like in the linked duplicate.

Faizuddin Mohammed Over a year ago

It didn't for the OP 🤷🏻‍♂️

riv Over a year ago

Why is this an answer? Removing the dots does nothing to fix the error message.

J2R · Accepted Answer · 2021-07-20 15:24:51Z

0

Use "./image.png".

The logic behind is that the css file you will place the code in, will be part of index.html when the app is finished, built and deployed.

answered Jul 20, 2021 at 15:24

J2R

1682 silver badges12 bronze badges

Comments

Evaldo Vega Vivanco · Accepted Answer · 2024-01-03 19:29:02Z

0

body{
  overflow-x: hidden;
  background-image: url('/public/imagenes/fondo.jpeg');
  background-size: cover;
}

answered Jan 3, 2024 at 19:29

Evaldo Vega Vivanco

1

1 Comment

kkkkkkkkkkkkkkkkk Over a year ago

needs formatting

Kabir Batra · Accepted Answer · 2024-11-23 08:16:50Z

0

background-image: url('/public/images/banner.jpeg');

this works for me. No need to move it inside ./src

answered Nov 23, 2024 at 8:16

Kabir Batra

11 bronze badge

1 Comment

Marc Scheib Nov 29, 2024 at 11:45

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

user2408962 · Accepted Answer · 2021-09-26 08:07:47Z

-2

The only way that helped me is adding full URL-adress to the image path. So this one can help:

background-image: url("http://localhost:3000/background.jpg");

answered Sep 26, 2021 at 8:07

user2408962

792 silver badges8 bronze badges

1 Comment

George Mylonas Over a year ago

This can't go to prod is it...

vikas kumar · Accepted Answer · 2021-10-07 11:46:07Z

-3

background-image: url("http:/images/pexels-photo-1.jpg");

answered Oct 7, 2021 at 11:46

vikas kumar

531 silver badge5 bronze badges

Collectives™ on Stack Overflow

Reference file in public folder from CSS in create-react-app

11 Answers 11

3 Comments

1 Comment

Comments

Comments

1 Comment

5 Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

3 Comments

1 Comment

Comments

Comments

1 Comment

5 Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related