React TSX页面PNG背景图不显示且无报错如何解决

问题原因 #

你代码中backgroundImage属性使用了普通双引号包裹变量插值语法，普通字符串不会解析${}占位符的变量值，最终实际渲染的背景地址是字面量url(${heroImage})而非你实际的图片路径，这是导致背景图不显示的核心原因。

解决方案 #

将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>

其他可选排查项 #

如果修改后仍未生效，可按以下步骤排查：

• 右键页面空白区域打开浏览器开发者工具的元素面板，查看对应Container节点的style属性，确认backgroundImage的值已经替换为正确的图片路径
• 排查是否有更高优先级的全局样式、react-bootstrap自带样式覆盖了background属性，可临时给backgroundImage属性值加!important验证
• 确认Container内部没有设置了不透明背景色的子元素遮挡了背景图

内容的提问来源于stack exchange，提问作者Zero Cool