nextjs 中使用 stylejsx 的背景图片

Posted 2023-02-22

【中文标题】nextjs 中使用 stylejsx 的背景图片

【英文标题】：Background image in nextjs using stylejsx

【发布时间】：2020-08-05 20:41:23

【问题描述】：

我对 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()

我也尝试在图片 url 中使用 require...

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

感谢您的帮助

【问题讨论】：

url('$require('../public/background.jpg')'); 这行得通吗？给出背景图片的路径

我已经尝试过了，但它给了我一个找不到模块：无法解析 '/Users/myprofile/Desktop/projectfolder/src/components 中的 '../public/background.jpg' /HomePage'，我的图片在公共文件夹中

【参考方案1】：

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

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

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

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