PNG不显示在react tsx页面没有错误

Question

我正在使用这个starter模板(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>

我还打印了图像，以确保返回的链接显示了图像。

console.log(heroImage);

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

这是怎么回事?

谢谢。

Answer 1

您使用双引号(")代替backgroundImage

应该

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