如何将图像导入 CSS 模块？

Posted 2023-02-21

【中文标题】如何将图像导入 CSS 模块？

【英文标题】：How to import images into CSS Modules?

【发布时间】：2021-06-13 19:51:49

【问题描述】：

我正在创建一个网站（使用 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;

【问题讨论】：

你好@AjeetShah 这里是codeandbox链接codesandbox.io/s/stupefied-burnell-ndkzj?file=/src/…

在浏览器中看代码，div的类名是什么？应该是Hero 吗？

我请求你通过这个问题来获得更好的洞察力***.com/questions/39195687/…

【参考方案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 中查找所有相关的模块引用（它们以 ./ 开头）并将它们替换为来自已编译包的最终路径。

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

【参考方案2】：

在非沙盒环境中试试这个。您导入 className 的方式很好。 我有一种感觉沙盒没有正确反映它。 你也可以试试-

content:url(<path to image>);

在 className 中而不是 background-image:url

【参考方案3】：

我用了背景颜色，成功了，但是图片没有，你可以将图片导入到App.js中

 import image from "./url";

 return (
  <img src=image  />
 )