如何在 React 和 NextJS 中从 css 加载背景图像

Question

图像不是从用于背景的 CSS 文件加载的，而是在 jsx 中加载的

在 CSS 文件中，我使用如下

.main-banner {
  position: relative;
  height: 910px;
  z-index: 1;
  background: transparent url(../../static/images/banner-bg1.jpg) right top no-repeat;
}

图片网址绝对没问题

和这样的配置文件

//next.config.js
const withImages = require('next-images');
const withCSS = require('@zeit/next-css')

module.exports = withImages(withCSS({
    cssLoaderOptions: {
        url: false
    }
}))

实际上是什么问题？

谢谢

Answer 1

您的静态文件正在部署到 Web 的根目录。与您编译的 js 和 css 文件相同。

因此，您可以使用以下网址访问它们： url(/static/images/banner-bg1.jpg)

有关此github 问题的更多信息。