PNG not showing in react tsx page with no errors-CodePudding

I am using this starter template (https://github.com/vikpe/react-webpack-typescript-starter).

I'm also using react-bootstrap, and have a container with a backgroundImage.

const heroImage = require("./../assets/img/hero.png").default;

const styles = {
  hero: {
    height: "100vh",
    display: "flex", 
    justifyContent: "center",
    alignItems: "center",
    backgroundImage: "url(${heroImage})",
    backgroundPosition: 'center',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat'
  },
  nav: {
    width: "100%"
  }
};

<Container fluid style={styles.hero}>
</Container>

I also print the image to make sure the link that returns shows me the image, which it does.

console.log(heroImage);

But for some reason, the image simply doesn't show. The background is blank with no errors.

What's going on here?

Thank you.

CodePudding user response：

You are using double quotes(") instead of backtick (`) in the backgroundImage

should be

backgroundImage: `url(${heroImage})`,