logo标签列表

Next.js设置背景图片

reactjsnext.jsbackground-image
8

我正在尝试为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>
  )
}
这个回答解决了你的问题吗？Next.js背景图片CSS属性无法加载图片 - juliomalves
4个回答
11
1
使用以下代码：
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;
}.......
2
请不要发布没有任何解释的解决方案。此外，您的代码不完整且不清晰。 - Eldar B.
1
这不起作用。 - Big boy
-1
<div
  style={{
    backgroundImage: "url('path-to-the-image')",
    width: "100%",
    height:[HEIGHT OF THE IMAGE],
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover"
  }}
>XXX</div>
“仅代码答案不是高质量的回答”。虽然这段代码可能有用，但您可以通过说明它的工作原理、使用场景以及局限性来改进它。请编辑您的回答，包括解释和相关文档链接。 - Stephen Ostermiller
-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"文件夹来存储图像，但实际并非如此。您可能应该澄清一下这个问题。 - Zsolt Meszaros
我的意思是，您不需要安装 next-images 来从 public 文件夹中提供图像，只有在您想要从其他地方导入图像时才需要。如果您将图像保存在 public 文件夹中，您可以像在示例中一样简单地引用它们：const img = "/security-team.jpg"; - Zsolt Meszaros
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接