如何在 Nextjs 中为组件设置背景图片？

Question

我查看了这个文档，Static File Serving，它明确指出：

Next.js 可以在根目录中名为 public 的文件夹下提供静态文件，例如图像。然后，您的代码可以从基本 URL (/) 开始引用 public 中的文件。

我已经在public文件夹中放了一个名为background.jpg的图片文件。

然后在我的pages/referral.js 我有以下代码：

import React from 'react';
import backgroundImage from '/background.jpg'; // later I removed this 

const styles = {
    container: {
        backgroundImage: `url(${backgroundImage})`,
        backgroundPosition: 'center',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        width: '100vw',
        height: '100vh'
    }
};

export default class Referral extends React.Component{

    render(){
        return(
            <div className="cComponent" style={styles} >
                <h1 align="center">Some item</h1>
            </div>
        )
    }
}

然后我收到此错误：Module not found: Can't resolve '/background.jpg' in referral.js。

我尝试了什么：

1. const backgroundImage = require('/background.jpg'); <-- and tried this
2. import backgroundImage from '/public/background.jpg';
3. import backgroundImage from './background.jpg'

上述所有尝试也会得到相同的错误。

我什至尝试添加next.config.js：

// next.config.js 
const withImage = require('next-images');
module.exports=withImage({});

然后像这样导入pages/referral.js：

 import backgroundImage from '/background.jpg';

也会出现同样的错误：Module not found: Can't resolve '/background.jpg' in referral.js。

我在这里错过了什么？也有人可以给我一个关于如何将背景图像放入组件的示例吗？

Answer 1

图片不需要导入，浏览器指定路径即可。

假设你有/public/bg.jpg，你可以在代码中引用它

backgroundImage: 'url(/bg.jpg)'

Answer 2

我认为你需要改变你的风格，因为你的容器有你的 css 可以应用。 style={styles.container}

<div className="cComponent" style={styles.container} >
   <h1 align="center">Some item</h1>
</div>

您可以检查和更改您的样式 css

<div>
      Hello
      <div
        style={{
          backgroundImage: `url(${Image})`,
          backgroundSize: "cover",
          backgroundRepeat: "no-repeat",
          width: "100vw",
          height: "100vh"
        }}
      />
      <hr />
      <div
        style={{
          backgroundImage: `url(/kittycat.jpg)`,  // coming from public folder
          backgroundSize: "cover",
          backgroundRepeat: "no-repeat",
          width: "100vw",
          height: "100vh"
        }}
      />
    </div>

供您参考Live working demo