反应 backgroundImage 内联样式不起作用

Question

我已经尝试了我能想到的所有方法，并在谷歌上搜索到了死亡。我无法让 React 使用内联样式加载背景图像。这是我的代码：

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

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

export default Layout

我的资产文件夹与布局组件位于同一文件夹中。

我会注意到我正在使用 Create-react-app。

谢谢

Answer 1

如果您使用 create-react-app 来加载图像并在 JS 和 CSS 文件中使用它们，则可以采用两种方法。

公共文件夹中的图像

您可以将图像添加到 public 目录中的目录中，并按如下方式使用它们：

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

与 CSS 或 JS 文件位于同一目录中的图像

如果您想相对地使用图像并动态导入它们，您应该将图像与要使用图像的 CSS 或组件放在同一目录中。构建代码库的最佳方法之一是使用组件作用域结构。通过这种方式，与组件相关的所有内容都将放入组件目录中。这也包含图像。

欲了解更多信息：

• 将公共文件夹用于 src 目录之外的一般资产
• 将图像直接导入到作用域结构中的组件文件中