react内联样式背景图片未显示

Question

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

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样式中删除了背景图像和背景颜色(？

Answer 1

问题：

此处缺少)：url(${imageFilename}

尝试：

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

Answer 2

第一个问题

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

第二个问题

你失踪了(在这里：背景图片：url(${imageFilename}

演示：-

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

Answer 3

您需要导入图像。

import imageFilename from '../../../assets/img/picture.jpg';