Javascript 属性背景图像不工作[React]

我试图根据组件属性的值设置div的背景图像，背景不显示，但是当我在css文件中对背景图像属性进行harcode时，背景会显示

以下是组件代码：

import React，{Component}来自“React”；
导入“/Banner.css”；
导出默认类扩展组件{
render（）{
常量样式={
backgroundImage:`url（${this.props.image}'）`，
};
返回(
请给我一份，一份，一份
);
}
}

因为，您正试图使用内联CSS直接访问组件中的图像。您必须将图像移动到公用文件夹

代码沙盒链接：

代码更改：

export default class Home extends Component {
  render() {
    const imageURL = "./assets/images/island-waves.png";
    return (
      <div className="container">
        <div className="slogan" style={{ backgroundImage: `url(${imageURL})` }}>
          Chez vous, partout et ailleurs
        </div>
        <Gallery />
      </div>
    );
  }
}

导出默认类主扩展组件{
render（）{
const imageURL=“./assets/images/island waves.png”；
返回(
请给我一份，一份，一份
);
}
}

注意：从React文档中，您可以看到在组件中添加图像的方法。但是，由于您需要一个内联CSS，在这种情况下，我们必须将

资产

文件夹移动到公用文件夹中，以确保图像与我们的组件正确引用