Background Image Not Displaying in React App

Question

I am trying to use a background image of an upload icon in my video cards within my React app, but so far have been unable to get the background image to display. I see the background color I have declared, but not the background image, and I'm not sure why. Here is the relevant code block:

    <Card.Section
      fill
      styles={{
        ...backgroundImageCardSectionStyles,
        root: {
          ...backgroundImageCardSectionStyles.root,
          backgroundImage: '../../assets/images/upload.png',
          backgroundColor: '#f3f2f1',
          minHeight: '150px',
          maxHeight: '150px',
        },
      }}
      ... more code

I also tried pulling the icon is an an import, like so:

import { uploadIcon } from '../../assets/images/upload.png';

... and then using it like this:

   <Card.Section
      fill
      styles={{
        ...backgroundImageCardSectionStyles,
        root: {
          ...backgroundImageCardSectionStyles.root,
          backgroundImage: uploadIcon,
          backgroundColor: '#f3f2f1',
          minHeight: '150px',
          maxHeight: '150px',
        },
      }}
      ... more code

But that also didn't work.

By the way, my backgroundImageCardSectionStyles referenced above looks like this:

const backgroundImageCardSectionStyles = {
  root: {
    backgroundPosition: 'center center',
    backgroundSize: 'cover',
    height: 144,
  },
};

What am I missing here?

Mantas Astra · Accepted Answer · 2020-12-08T13:54:22.487

1

Try using url in your CSS when you are setting the background. The url() is used to include a file in CSS.

 import UploadIcon from "../image.png"

 <Card.Section
      fill
      styles={{
        ...backgroundImageCardSectionStyles,
        root: {
          ...backgroundImageCardSectionStyles.root,
          backgroundImage: `url(${UploadIcon})`,
          backgroundColor: '#f3f2f1',
          minHeight: '150px',
          maxHeight: '150px',
        },
      }}
      ... more code

edited Dec 08 '20 at 13:54

answered Dec 08 '20 at 13:45

Mantas Astra

952
6
14

With that I get a `'url' is not defined` error. Should the entire value be wrapped in backticks rather than just the inner section? – Muirik Dec 08 '20 at 13:48
1

To make it work, you need to change your import of the image to `import Image from "../.."` Don't need to use {}. – Mantas Astra Dec 08 '20 at 13:53

Background Image Not Displaying in React App

1 Answers1