使用stylejsx的nextjs中的背景图像

Question

我把NextJS和background属性搞混了。

在组件中，我想创建一个英雄部分，但我不知道如何在样式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-images，并在next.config.js中进行如下配置：

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

我还试着在图片的url中使用了require ...

如何在next js中使用背景图像？

谢谢你的帮忙

Answer 1

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

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

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

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