Next.js 设置背景图片

Question

我正在尝试向 next.js 添加背景图片，但无法这样做。我尝试了很多内联 scc、style jsx 和其他技术的解决方案。无法直接写入样式，因为它会出错

错误：

Expected a template literal or String literal as the child of the JSX Style tag (eg: <style jsx>{`some css`}</style>), but got BinaryExpression

也试过这个解决方案但得到错误：

代码

const img = require("../../assets/images/security-team.jpg");

<div
  style={{
    backgroundImage: "url(" + `${require("./path-to-the-image")}` + ")",
    width: "100%",
    height:[HEIGHT OF THE IMAGE],
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover"
  }}
>XXX</div>

错误

Failed to compile
./public/121.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

但是当尝试这段代码时，它不会给出错误，背景图像也不会在网页上显示。

代码

export default function Home() {
  
  let styleConfig = { backgroundimage : '/abc.jpeg' }

  
  return (

      
    <div className="container"  style={styleConfig} ></div>
      
     


      <style jsx>{`
       
       
        .container {
          min-height: 100vh;
          padding: 0 0.5rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-image : "/public/121.png"
        }
        

        
      `}</style>



      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }

        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  )
}

Answer 1

NEXT.JS 提供官方支持 需要两个步骤。

1. 用具有样式的 div 包装图像组件（将提供示例）。
2. 为 Image 组件提供示例中提到的属性。

演示：https://image-component.nextjs.gallery/background

文档：https://nextjs.org/docs/api-reference/next/image

代码：https://github.dev/vercel/next.js/blob/canary/examples/image-component/pages/background.js

Answer 2

使用以下代码：

import Image from 'next/images';
import {bgWrap} from '../styles.module.css';

<div className={bgWrap}>
      <Image
        alt="travel"
        src="your img path inside public folder"
        layout="fill"
        objectFit="cover"
        quality={100}
      />
</div>

添加此样式：

.bgWrap {
position: fixed;
height: 100vh;
width: 100vw;
overflow: hidden;
z-index: -1;
}.......       

Answer 3

将您的图像保存在公共文件夹中

const img = "/thisImage.png";

    return (
        <div className="image">

            <div>XXX</div>
            <style jsx>
                {`
          .image {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-image: url(${img});
          }
        `}
            </style>
        </div>
    )

Answer 4

<div
  style={{
    backgroundImage: "url('path-to-the-image')",
    width: "100%",
    height:[HEIGHT OF THE IMAGE],
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover"
  }}
>XXX</div>