Как импортировать изображения в модули CSS?

Я создаю веб-сайт (создание с использованием 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;
}

webpack reactjs css react-css-modules
person Avishka_Kapuruge    schedule 16.03.2021    source источник
comment
Привет, @AjeetShah, вот ссылка на коды и ящики codesandbox.io/ s/stupefied-burnell-ndkzj?file=/src/   -  person Avishka_Kapuruge    schedule 17.03.2021
comment
Посмотрите на код в браузере, какое имя класса у div? Вместо этого должно быть Hero?   -  person Adriano    schedule 17.03.2021
comment
Я прошу вас ответить на этот вопрос, чтобы лучше понять stackoverflow.com/questions/39195687/   -  person saurav    schedule 17.03.2021

Ответы (3)


arrow_upward
1
arrow_downward

Попробуйте это в среде без песочницы. То, как вы импортировали className, в порядке. У меня есть ощущение, что песочница не отражает это должным образом. Вы также можете попробовать -

content:url(<path to image>);

в className вместо background-image:url

person Anuraag Gupta    schedule 17.03.2021

arrow_upward
0
arrow_downward

Я использовал фон в цвете и преуспел, но изображение не получилось, вы можете импортировать изображение в App.js

 import image from "./url";

 return (
  <img src={image} alt="" />
 )
person Bon Pham    schedule 17.03.2021

arrow_upward
0
arrow_downward

Это проблема 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. Таким образом, это может быть не идеальный способ обработки стилей (высота/ширина). Таким образом, вы можете улучшить его. Вот полный код*.

Как упоминается в документации, с помощью веб-пакета вы может загружать изображения в CSS как:

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

Webpack находит все относительные ссылки на модули в CSS (они начинаются с ./) и заменяет их конечными путями из скомпилированного пакета.

* Я предоставил полный код, так как изображение не отображалось в codeandbox, а отображалось на моем локальном компьютере.

person Ajeet Shah    schedule 17.03.2021