Question

我已经尝试了所有我能想到的东西，以及用Google搜索这个死神。我不能让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文件中使用它们，可以采用两种方法。

公用文件夹上的图像

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

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

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

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

有关详细信息，请Checkout the official documentation of CRA

Answer 2

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

Answer 3

确保尝试应用的样式正确。在我的情况下，并未应用width和height样式，而是使用140px !important而不是140px样式。删除!important后，便立即应用了内联样式。

Answer 4

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

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

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

React backgroundImage内联样式不起作用

4 个答案:

公用文件夹上的图像

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