Cannot import from public folder in CSS Create React App

Question

In a project bootstrapped with Create React App, in my public folder I have a assets folder with the file logo512.jpg.

When I reference the file in a component like so

<div>
    <img src='/assets/logo512.jpg'/>
</div>

I everything works perfectly. However, when I reference the same file in a CSS file for the same component like so:

background {
    background-image: url('assets/logo512.jpg');
}

Then the error Can't resolve '/assets/logo512.jpg' in DIRECTORY_OF_COMPONENT/assets/logo512.jpg

Note that DIRECTORY_OF_COMPONENT is not the public folder but the folder the CSS file is in. How do I make it so the url references the public folder instead?

Below is the full code along with my file structure:

// HomePage.js

import React from 'react';
import 'tachyons';
import './HomePage.css';

function HomePage() {
    return (
        <div className="background tc">
            <div>
                <img src='/assets/logo512.jpg'/> //this works 
            </div>
        </div>
    );
}

export default HomePage;



// HomePage.css
.background {
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    background: url('/assets/logo512.jpg'); //this does not work
}

You may try my answer, I have mentioned in detail how to do this :) If you still have issues I would like to check you folder structure — Imran Rafiq Rather
– Imran Rafiq Rather, Commented Jan 9, 2021 at 7:59

mikemaccana · Accepted Answer · 2022-08-04 14:38:43Z

3

UPDATE:

CASE 1:

If you image is in the public folder. Then the code should work provided you are using assets folder right within the public folder.

Codesandbox Demo for all the three cases : https://codesandbox.io/s/images-not-loaded-hkzq1

CASE 2:

In case you want to use images from other than the public folder, You will need to import the image in your React project first. (Make sure the Path is correct and your image).

import MyImage from "./assets/logo512.jpg"

And then use in the src attribute.

<img src={MyImage}/>

Case 3: When using CSS to set image on a block level element:

.background  {
  height:200px; /* Make sure height of the div is given for image to be within*/
  background-image: url("assets/logo512.jpg");
}

This should work properly (provided you relative path is correct with regard to the CSS file)

NOTE: With SVG images React has come up with a component based way where we use as a component by importing our SVG with ReactComponent.

import { ReactComponent as Logo } from './logo.svg';

return(<Logo/>)

edited Aug 4, 2022 at 14:38

mikemaccana

126k113 gold badges441 silver badges544 bronze badges

answered Jan 9, 2021 at 7:55

Imran Rafiq Rather

8,2881 gold badge23 silver badges41 bronze badges

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

16 Comments

Cirrus86 Over a year ago

My issue is that I have case 3 (with the image in public/assets and the url in the css), but the error is still present.

Cirrus86 Over a year ago

My code is (I believe - unless I am missing something) identical to case 3 of your demo

Imran Rafiq Rather Over a year ago

Let me check is there anything missing in your code :)

Imran Rafiq Rather Over a year ago

One reason: You need to set the height of your div first :) Check this May be this is the issue. Have updated my answer in case 3

Cirrus86 Over a year ago

I've edited the question with the relevant code and file structure. I'll hold off on closing the question for now since my issue is still present :)

|

mikemaccana · Accepted Answer · 2022-08-04 15:19:23Z

I had this issue myself but found the other answer too vague.

To be clear: assets in your CSS corresponds to the src/assets dir in your project.

Here's me using a static asset in my CSS:

@font-face {
  font-family: "ITC Clearface";
  src: url("assets/ClearfaceStd-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

But you can also diagnose why your path isn't working from the error the compiler shows, eg:

Module not found: Error: Can't resolve 'assets/somefile' in '/home/mike/Code/myapp/website/src'

See if that file exists by running (bash or powershell)

ls /home/mike/Code/myapp/website/src/assets/somefile

If that doesn't work, then the file doesn't exist - you likely have a typo in the name! In my case it turns out the font file I was using in my CSS had a minor spelling error.

Nsanzimfura Eric · Accepted Answer · 2023-07-17 20:05:10Z

0

Here is how i do it and works pretty fine: it is two ways:

I import that image from public, and i do it in tsx components like this:

const myBg = './images/bg.png';
// and then use this variable where ever i want: like this: 
<div style={{backgroundImage: `url('${myBg}')`}}< /div>
//remember to set width and height on that div , to display image inside

Import it directly from public to css, by hard coding the full path: like:

    .my_bg{
        background-image: url('../../../public/images/bg.png') /* this is a full path to public from your css/sass , and
     the rest of your CSS ... */

}

edited Jul 17, 2023 at 20:05

answered Jun 2, 2023 at 9:53

Nsanzimfura Eric

11 bronze badge

Collectives™ on Stack Overflow

Cannot import from public folder in CSS Create React App

3 Answers 3

16 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

16 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related