React makeStyles doesn't set background image

Question

Despite trying several ways to load the image for the backgroundImage property, it never shows up in page. Loading external images (for example from google) works as expected.

I tried:

backgroundImage: `url(${Papyrus})`
backgroundImage: "url(" + Papyrus + ")"
backgroundImage: "url(../../assets/images/papyrus.png)"
backgroundImage: Papyrus
backgroundImage: "url(\"../../assets/images/papyrus.png\")"
backgroundImage: "url(assets/images/papyrus.png)"

NONE of them work. The image is loaded when I look at my network audit, I can find it in the static folder, but it's never displayed.

App.tsx

import React from 'react';
import makeStyles from './app-styles';
import {Container} from "@material-ui/core";
import Description from "../description/description";

const App: React.FC = () => {
    const classes = makeStyles();
    return (
        <div className="App">
            <Container maxWidth={"xl"}>
                <div className={classes.row}>
                    <Description/>
                </div>
            </Container>
        </div>
    );
};

export default App;

description.tsx

import * as React from "react";
import makeStyles from './description-styles';

interface DescriptionProps {
}

const Description: React.FC<DescriptionProps> = () => {
    const classes = makeStyles();

    return (
        <div className={classes.descriptionCard}>
            <p>Some text</p>
        </div>
    )
};

export default Description;

description-styles.tsx

import makeStyles from "@material-ui/core/styles/makeStyles";
import Papyrus from "../../assets/images/papyrus.png";

export default makeStyles(theme => ({
    descriptionCard: {
        backgroundImage: `url(${Papyrus})`,
        // margin: 'auto',
        height: '25vh',
        width: 'calc(20vw * 0.54 - 2%)',
        borderRadius: 8,
        display: 'flex',
        marginLeft: '10px',
        marginTop: '10px'
    },
    text: {

    }
}))

Solution 1

Add some additional properties to the background image and it will work -

descriptionCard: {
        backgroundImage: `url(${Papyrus})`,
        backgroundPosition: 'center', 
        backgroundSize: 'cover', 
        backgroundRepeat: 'no-repeat',
        // margin: 'auto',
        height: '25vh',
        width: 'calc(20vw * 0.54 - 2%)',
        borderRadius: 8,
        display: 'flex',
        marginLeft: '10px',
        marginTop: '10px'
    }

I'm not sure why we need these additional properties (maybe someone could add to the answer), but sometimes the image needs certain behaviour to be defined, like size, position, etc.

Solution 2

You should write it line this:

backgroundImage: `url(images/papyrus.png)` 

And it should work.

Solution 3

This way works for me

    import LaptopImage from "../../assets/laptop.jpg";
    ...

    const useStyle = makeStyles((theme) => ({
        wrapper:{
            backgroundImage: `url(${LaptopImage})`,
            height: '100vh'
        }
    })

Its the bare minimum. Rest you can align it properly.

Solution 4

use props, try this:

const useStyles = makeStyles({
  bg: props => ({
    backgroundImage: \`url(${props.backgroundImage})\`
   })
})

View more solutions

Comments

[Mike]

Doesn't work either. Also it's pretty much the same as backgroundImage: "url(../../assets/images/papyrus.png)"

[Domino987]

I updated my code, which works for me. I just tried it out.

[Domino987]

Where is your image located anyway?

[Mike]

src/assets/images/image

[Domino987]

ok for images,, which are not in the public folder(docs, you can just reference them like this: background-image: url(./papyrus.png);

[Mike]

your link has an extra %5D at the end

[vkt]

This works for me, the image file gets loaded here; else the CSS is there but the image file is missing