Next.js Set background Image

Question

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

Answer 1

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