I have tried everything I can think of, as well as Googled this to death. I cannot get React to load a background image using inline styles. Here is my code:

const url = './assets/backgrounds/terzo1.jpg'
const style = {
  backgroundImage: `url(${url})`,
  backgroundSize: 'cover',
}

const Layout = props => (
  <div style={style}>
    TEXT
  </div>
)

export default Layout

My assets folder is in the same folder as the Layout ponent.

I will note that I am using Create-react-app.

Thanks

I have tried everything I can think of, as well as Googled this to death. I cannot get React to load a background image using inline styles. Here is my code:

const url = './assets/backgrounds/terzo1.jpg'
const style = {
  backgroundImage: `url(${url})`,
  backgroundSize: 'cover',
}

const Layout = props => (
  <div style={style}>
    TEXT
  </div>
)

export default Layout

My assets folder is in the same folder as the Layout ponent.

I will note that I am using Create-react-app.

Thanks

• javascript
• reactjs

• 1 what bundler are you using? and with what config? – Farzad Yousefzadeh Commented Dec 18, 2017 at 20:50
• I'm using: github./facebookincubator/create-react-app I cannot modify the configuration without ejecting. Images defined in CSS files imported in as import './file.css' work fine. My goal is to dynamically load a background, which is why I am not using that method. – Cazineer Commented Dec 18, 2017 at 20:53
• with react you need to import import img from '../../img/img.png'; – Gavin Thomas Commented Dec 18, 2017 at 20:56

4 Answers 4

If you are using create-react-app, for loading images and using them in your JS and CSS files, there are two approaches one could take.

Images on public folder

You can add your images in a directory inside public directory and use them as follows:

const style = {backgroundImage: 'url(/images/some-image.png)'}

Images in the same directory as your CSS or JS files

If you want to use images relatively and import them dynamically, You should put your images in the same directory as the CSS or Component that you want to use image in. One of the best ways to structure your codebase is to use ponent scoped structure. In this way, all stuff related to a ponent will go in the ponent's directory. This contains the images too.

For more info:

• Use public folder for general assets outside of src directory
• Import images directly into the ponent file in a scoped structure

This worked for me in a React 16.11.0 project created with create-react-app:

import emailIcon from '../../assets/images/footer/icons/email.png';

<div style={{ backgroundImage: "url(" + emailIcon + ")" }}></div>

Make sure the style you try to apply is correct. In my case, width and height styles weren't applied as it was: 140px !important, instead of just 140px. As soon as I removed !important, inline style has been applied.

Inspect image in chrome console. Open image url from rendered element in new tab. It may be wrong relative path or something wrong with server public folder setup. Try to fix image url in separate tab. Once you get the image, fix path in the ponent accordingly