Next.js 设置背景图片答案

【问题标题】：Next.js Set background ImageNext.js 设置背景图片
【发布时间】：2020-11-21 12:29:34
【问题描述】：

我正在尝试向 next.js 添加背景图像，但无法这样做。我尝试了许多解决方案内联 scc、样式 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>
  )
}

【问题讨论】：

这能回答你的问题吗？ Next.js background-image css property cant load the image

标签： reactjs next.js background-image

【解决方案1】：

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

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>
    )

【讨论】：

有了这些序号，看起来他们需要安装软件包，然后使用public 文件夹来存储图像，但事实并非如此。你可能应该澄清一下。
我的意思是你不需要安装next-images 来提供来自public 文件夹的图像，只有当你想从其他地方导入图像时。如果您将图像保存在 public 文件夹中，您可以像在示例中那样简单地引用它们：const img = "/security-team.jpg";
更新了我的答案

【解决方案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;
}.......

【讨论】：

请不要在没有任何解释的情况下发布解决方案。此外，您的代码不完整且不清楚。

【解决方案3】：

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

用具有样式的 div 包装 Image 组件（将提供示例）。
为 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

【讨论】：