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-images，并在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>

使用stylejsx在nextjs中的背景图像

1 个答案: