Next.js 设置背景图片 [英] Next.js Set background Image

问题描述

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

错误:

期望模板文字或字符串文字作为 JSX 样式标签的子代(例如:<style jsx>{`some css`}</style>)，但得到 BinaryExpression

也尝试了这个解决方案，但出现错误:

代码

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

错误

编译失败./public/121.png 1:0模块解析失败:意外字符 ' ' (1:0)您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件.见 https://webpack.js.org/concepts#loaders(此二进制文件省略了源代码)

但是当尝试这个代码时它不会报错并且背景图片也不会显示在网页上.

代码

导出默认函数 Home() {让 styleConfig = { backgroundimage : '/abc.jpeg' }返回 (

解决方案

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

1. 用具有样式的 div 包装 Image 组件(将提供示例).
2. 为 Image 组件提供示例中提到的属性.

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

文档:https://nextjs.org/docs/api-reference/next/图片

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

I am trying to add a background image to next.js but not able to do so. I have tried many solutions inline scc, style jsx, and other techniques. Not able to write directly into the style because it give error

Error:

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

also tried this solution but got error:

Code

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>

error

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)

But when try this code it will not give error and background image also not shown on the webpage.

Code

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

解决方案

An official support had been provided by NEXT.JS Two steps are required.

1. Wrap the Image component with div which has styles (will provide example).
2. Provide the Image component with the attributes as mentioned in the Example.

Demo: https://image-component.nextjs.gallery/background

Documentation: https://nextjs.org/docs/api-reference/next/image

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

这篇关于Next.js 设置背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！