背景图像未显示在我的反应应用程序中答案

【问题标题】：background-image does not display in my react application背景图像未显示在我的反应应用程序中
【发布时间】：2020-07-25 15:51:37
【问题描述】：

我是新来的反应并尝试制作一个简单的组件并使用单独的 css 文件设置其背景图像。

我的 App.js 组件：

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div className="header-img">
        {/* <img src={require('./header.jpg')} alt='header-img'/> */}
      </div>
    </div>
  );
}

CSS 文件：

*{
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

.header-img{
  width: 100%;
  height: 426px;
  margin-top: 50px;
  background-image: url('./header.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* background-color: aquamarine; */
}

这是 CodeSandBox 链接 https://codesandbox.io/s/clever-silence-cvhyt?file=/src/styles.css:0-309

【问题讨论】：

标签： css reactjs

【解决方案1】：

通过纯 CSS 使用文件仅适用于静态文件，因此您需要将图像放在 public 文件夹中。

这是因为使用 create-react-app 引导的 React 应用程序使用 webpack 来捆绑 src 文件夹，通过 CSS 访问像 './header.jpg' 这样的路径不会捆绑文件。

// public/header1.jpg

.header-img {
  background-image: url("./header1.jpg");
}

【讨论】：

非常感谢我的朋友❤️