javascript - react 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

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

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

谢谢

Answer 1

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

公共(public)文件夹中的图片

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

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

图像与您的 CSS 或 JS 文件在同一目录中

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

更多信息:

• Use public folder for general assets outside of src directory
• Import images directly into the component file in a scoped structure