PNG 没有显示在反应 tsx 页面中，没有错误

Question

我正在使用这个入门模板 (https://github.com/vikpe/react-webpack-typescript-starter)。

我也在使用 react-bootstrap，并且有一个带有 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>

我还打印图像以确保 returns 的 link 向我显示图像，确实如此。

console.log(heroImage);

但由于某种原因，图像根本不显示。背景空白，没有错误。

这是怎么回事？

谢谢。

Answer 1

您在背景图片中使用双引号 (") 而不是反引号 (`)

应该是

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

PNG 没有显示在反应 tsx 页面中，没有错误

PNG not showing in react tsx page with no errors

javascript

typescript

reactjs

react-bootstrap