Next.js 设置背景图片

IT技术 reactjs next.js background-image
2021-04-26 03:49:46

我正在尝试向 next.js 添加背景图像，但无法这样做。我尝试了许多解决方案 inline 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>
  )
}
3个回答
  1. 安装“next-images” https://github.com/twopluszero/next-images
  2. 将您的图像保存在公共文件夹中
const img = "/security-team.jpg";

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

使用以下代码：

import Image from 'next/images';
<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;

}

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

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

其它你可能感兴趣的问题
上一篇material -ui 的 Typography 组件的有效值是什么 下一篇轴之间缺乏隔离