css - 如何将图像导入 CSS 模块？

Question

我正在创建一个网站(使用 React 创建)。所以我想为主页添加一个全屏图像。我正在使用 CSS 模块。将图像导入 module.css 时，它不会被渲染。我怎样才能解决这个问题。这是我的代码。我正在导入这个(scr => Assets 文件夹)

codesandbox-link

Home.js

import React from 'react'
import styles from '../styles/Home.module.css'
 
const Home = () => {
    
    return (
        <div className={styles.Hero} ></div>       
                             
        
    )
}

export default Home

Home.module.css

.Hero {
  background-image: url(../assets/hero.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Answer 1

这是 CSS 问题，你的 div，应该在背景中显示图像，没有 height 和 width:

添加以下样式后背景图片加载完美:

全局 CSS (styles.css):

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

App.module.css:

.Hero {
  background-image: url(./assets/hero.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}

在 App.js 中:

import styles from "./App.module.css";

export default function App() {
  return (
    <div style={{ width: "100%", height: "100%" }}>
      <div className={styles.Hero}></div>
    </div>
  );
}

我不擅长 CSS。因此，这可能不是处理样式(高度/宽度)的完美方式。所以，你可以改进它。这是完整的 code *.

---

作为mentioned在文档中，使用 webpack，你可以在 CSS 中加载图像:

.Logo {
  background-image: url(./logo.png);
}

Webpack 在 CSS 中查找所有相关模块引用(它们以 ./开头)并将它们替换为编译包中的最终路径。

*我提供了完整的代码，因为图像没有显示在 codesandbox 中，而是显示在我的本地机器上。