css - 背景图像不显示在我的 react 应用程序中

Question

我是新手，尝试制作一个简单的组件并使用单独的 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

Answer 1

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

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

// public/header1.jpg

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