Cannot import from public folder in CSS Create React App

user_12788827 0
Viewed 2762

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
}

File Structure

create-react-app reactjs css javascript
2 Answers

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/>)
user_69389690

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.

user_1236710
Related