Блог

Мой корень для изображений /public/images/MY_IMAGE.JPG

Я хочу загрузить фоновое изображение с помощью CSS.

Мой код:

 .mobile-image-hero-1 {
  background-image: url('/public/images/mobile-image-hero-1.jpg');
  height: 500px;
  background-size: cover;
  background-repeat: no-repeat;
}
 

также пробовали background-image: url('../public/images/mobile-image-hero-1.jpg');

Я выполняю рендеринг через имя класса

<header className='mobile-image-hero-1 h-48'>

Я просто хочу простой способ иметь фоновое изображение div.

P.S Я просмотрел другие ответы здесь, чтобы не превалировать.

Изображения в Next.js в public каталоге можно ссылаться на с public в качестве базового маршрута, так что это должно сработать:

 background-image: url('/images/mobile-image-hero-1.jpg');