Javascript React backgroundImage内嵌样式不起作用

我已经尝试了我能想到的一切，也用谷歌搜索到了死亡。我无法使用内联样式加载背景图像。这是我的密码：

const url = './assets/backgrounds/terzo1.jpg'
const style = {
  backgroundImage: `url(${url})`,
  backgroundSize: 'cover',
}

const Layout = props => (
  <div style={style}>
    TEXT
  </div>
)

export default Layout

consturl='./assets/backgrounds/terzo1.jpg'
常量样式={
背景图片：`url（${url}）`，
背景尺寸：'封面'，
}
常量布局=道具=>(
正文
)
导出默认布局

“我的资源”文件夹与布局组件位于同一文件夹中

我会注意到我正在使用CreateReact应用程序

---

如果您正在使用CreateReact应用程序加载图像并在JS和CSS文件中使用它们，那么您可以采取两种方法

公用文件夹上的图像 您可以将图像添加到公共目录中的目录中，并按如下方式使用它们：

const style = {backgroundImage: 'url(/images/some-image.png)'}

与CSS或JS文件位于同一目录中的图像 如果您想相对地使用图像并动态地导入它们，那么应该将图像与要使用图像的CSS或组件放在同一目录中。构造代码库的最佳方法之一是使用组件范围的结构。这样，与组件相关的所有内容都将进入组件的目录。这也包含图像

有关更多信息：

---

检查chrome控制台中的图像。从“新建”选项卡中的渲染元素打开图像url。可能是相对路径错误或服务器公用文件夹设置有问题。尝试在单独的选项卡中修复图像url。获得图像后，相应地修复组件中的路径

确保尝试应用的样式正确。在我的例子中，

width

和

height

样式没有按原样应用：

140px！重要信息

，而不仅仅是

140px

。一旦我删除

！重要信息

，已应用内联样式。

这在使用create React app创建的React 16.11.0项目中对我有效：

import emailIcon from '../../assets/images/footer/icons/email.png';

<div style={{ backgroundImage: "url(" + emailIcon + ")" }}></div>

从“../../assets/images/footer/icons/email.png”导入emailIcon；

您使用的捆绑包是什么？使用什么配置？我正在使用：我不能在不弹出的情况下修改配置。在导入为“/file.CSS”的CSS文件中定义的图像可以正常工作。我的目标是动态加载背景，这就是我不使用该方法的原因；他妈的干得很好。谢谢@Kainan很高兴这有帮助：）@FarzadYZ看起来你链接到的页面已经移动了，不确定它发送给你的文档是否正确。我有点困惑，因为这一点，不知道你的回答的后半部分是否直接谈到如何链接到以内嵌CSS为主要问题的网页的图像文件，但也许你链接到了更完整的信息…@BBaysinger谢谢你的提示。他们最近对文档做了很多更改，特别是从v1到v2。我只是用更新的链接修改了答案。