样式表中的背景图像未加载 Nextjs

Question

我的图片根是 /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 我已经查看了这里的其他答案，但没有占上风。

Answer 1

public 目录中 Next.js 中的图像可以使用 public 作为基本路由来引用，因此应该可以：

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