reactjs - nextjs 中使用 stylejsx 的背景图片

Question

我对 NextJS 和背景属性感到很困惑。

在一个组件中，我想制作一个英雄部分，但我不知道如何在样式 jsx 中使用它。

我的组件：

const homeTitle = () => (
    <div className="home_title">
    <p>My title</p>
    <h1>something else </h1>
    
    <style jsx>{`
    .home_title{
        text-align: center;
        background: url(/public/background.jpg) no-repeat;
        height: 100%;
        width: 100%;
    }
    `}</style>
    </div>
);

export default homeTitle;

我尝试安装和设置下一个图像，并在 next.config.js 中进行配置，如下所示：

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

我还尝试在图片网址中使用 require ......

我如何在下一个 js 中使用背景图像？

谢谢你的帮助

Answer 1

编辑：好的，我找到了方法，首先，我像这样导入图像：

import Hamburger from '../../public/hamburger.svg';

然后，在我的 jsx 中，我像这样使用它：

<style jsx>{`
    .hamburger{
        width: 62px;
        height: 62px;
        background: url(${Hamburger}) no-repeat;
    }
  `}</style>