时间戳

首页 > 解决方案 > 反应内联样式背景图像未显示

css - 反应内联样式背景图像未显示

问题描述

我正在尝试在反应组件中加载背景图像。图像最终会有所不同，因此我使用内联样式执行此操作，如下所示：

const imageFilename = '../../../assets/img/picture.jpg';
<div className="auth-page" style={{backgroundImage: `url(${imageFilename}` , backgroundColor: '#cccccc'}}>

在 chrome devtools 中，我可以看到看起来正确但没有文件可见的样式元素 - 我确实看到了背景颜色。

element.style {
    background-image: url(../../../assets/img/picture.jpg);
    background-color: rgb(204, 204, 204);
}

如果我使用具有相同路径和文件名的背景图像的普通 css 文件，则会显示图像：

.auth-page {
  padding-top: 10vh;
  height: 100vh;
  background-image: url(../assets/img/full-screen-image-5.jpg);
  background-color: #cccccc;
}

为什么使用内联样式不起作用（我从 auth-page css 样式中删除了背景图像和背景颜色）？

标签： cssreactjs

解决方案

第一个问题

当背景图像显示时，宽度和高度必须与背景图像一起给出。

第二个问题

你错过了）这里：背景图片：url(${imageFilename}

演示：-

    const imageFilename = ../../../assets/img/picture.jpg';
    <div className="auth-page" style={{backgroundImage: `url(${imageFilename})` , backgroundColor: '#cccccc', width: "100%", height: "100vh"}}></div>

推荐阅读