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 ponent 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 ponent 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
}

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 ponent 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 ponent 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
}

• javascript
• css
• reactjs
• create-react-app

• 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 Commented Jan 9, 2021 at 7:59

3 Answers 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 e up with a ponent based way where we use as a ponent by importing our SVG with ReactComponent.

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

return(<Logo/>)

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 piler 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.

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

1. I import that image from public, and i do it in tsx ponents 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

2. 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 ... */

}