Next.js 背景图像 css 属性无法加载图像

Question

问题只是我正在尝试访问静态图像以在 React 中的内联背景图像属性中使用。

我正在使用 reactjs，next.js 然后我遇到了使用 next.js 添加图像的问题，但通过使用名为 Next.js + Images,[=16 的图像加载器解决了这个问题=]

现在我可以使用普通 html img 标签正常添加图像

示例：<img src={ img } /> 这行得通。

但是当我尝试添加 css 背景图片时，如下所示：

const team = (props) => {
const img = require("../../assets/images/security-team.jpg");
const styling = {
    backgroundImage: `url('${img}')`,
    width:"100%",
    height:"100%"
}
console.log(img);
return (
    <dev className="team" style={styling}>

    </dev>
);

}

这是 console.log 结果：

/_next/static/images/security-team-449919af8999ae47eaf307dca4dda8e1.jpg

图像没有出现，然后没有发生错误，我尝试在浏览器网站中输入-url + console.log 结果图像出现了！

Answer 1

当我使用 JSX 样式然后添加绝对位置时属性它工作得很好。

像这样：

 <style JSX>{`
    .team {
        width:100%;
        height:100%;
        position:absolute;
        background: url('`+img+`') no-repeat;
    }
`}</style>

Answer 2

如果您将图像放在“/static/images/”文件夹中，您也可以尝试使用“/static/images/security-team.jpg”而不导入。例如：

const styling = {
  backgroundImage: "url('/static/images/security-team.jpg')",
  width:"100%",
  height:"100%"
}
return (
  <div className="team" style={styling}></div>
);

Answer 3

next-images 包适合我。

第一个：

yarn add next-images

然后，在 next.config.js 文件中：

const withImages = require('next-images')
module.exports = withImages()

那么你可以这样做:

<div
  style={{
    backgroundImage: "url(" + `${require("./path-to-the-image")}` + ")",
    width: "100%",
    height:[HEIGHT OF THE IMAGE],
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover"
  }}
>XXX</div>

有关下一张图片的更多信息：https://github.com/twopluszero/next-images

Answer 4

你可以把图片放在public文件夹里，然后这样访问：

const team = (props) => {
const styling = {
    backgroundImage: `url('./security-team.jpg')`,
    width:"100%",
    height:"100%"
}
return (
    <dev className="team" style={styling}>

    </dev>
);

Answer 5

css 文件 在 styles/home.scss

图像文件 public/bg-img.png

.content_bg {
    margin: 50px 0;
    background-image: url('../public/bg-img.png');
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
}

Answer 6

你所要做的就是改变url

来自 background-image: url('/public/images/my-img.jpg');

到background-image: url('/static/images/my-img.jpg');

Answer 7

/static 目录已弃用。任何尝试使用它的人都可能会在他们的控制台中收到错误消息，但这里 link 包含 NextJS 对他们选择弃用静态目录的原因的解释。

Because public also covers the static directory use case we have decided to deprecate the static directory in favor of creating a public/static folder with the same functionality.

Answer 8

我设法通过使用图像对象的 src 属性解决了这个问题，所以：

{ img.src }

他们的文档显示了通过以下方法实现的背景图片：

import Image from 'next/image'
<Image />

这是一个现场演示 - https://image-component.nextjs.gallery/background

Answer 9

<div className="VistaCodeLab" style={{backgroundImage: ` url('data:image/png;base64,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')`}}></div>

像这样使用 base64 图片

在线图片转base64工具 https://www.base64-image.de/

Answer 10

图片必须在 public（顺风示例）

<div className="my-5 lg:my-6">
 <img src="/logotipo/logo.png" alt="easybanklogo" />
</div>

Answer 11

使用 next@11.0 我将我的图像放在 public 文件夹中，然后在样式文件中我使用了以下内容并且它起作用了。

background-image: url('/image.svg');

Answer 12

首先导入图片文件

import bg from '../../assets/images/security-team.jpg'

然后应用内联样式

style={{
      backgroundImage: `url(${bg.src})`,
      width: '100%',
      height: '100%',
    }}

Answer 13

 <div
  class="horizontal-layout horizontal-menu navbar-static dark-layout 1-column footer-static bg-full-screen-image  blank-page blank-page"
  data-open="hover"
  data-menu="horizontal-menu"
  data-col="1-column"
  data-layout="dark-layout"
  style={{ backgroundImage: "url(/assets/images/pages/auth-bg.jpg)" }}
>

Answer 14

Example using Nextjs, node modules and scss.

    import styles from "../styles/Home.modules.scss"
    import Image from "next/image"
    export default function Home() {
      <div className={styles.background_image}> 
        <Image
          width={2746}  //use the width of the image being used
          height={4681} //use the height of the image being used
          layout="fill"
          alt="water_portrait"
          src="/home/water_portrait.jpg" //image saved in public/home
        />
      </div>
   }

  //styles/Home.module.scss
  .background_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
  }
  .somethingElse{
      positsion: relative;
      z-index:10;
  }

Answer 15

这里的所有解决方案都不允许 NextJs 自定义 <Image> 组件的主要优势，该组件默认提供优化的响应式图像并具有巨大的优势。如果可以，我会使用 z-index 来“伪造”一个 css 背景图像。

但是，此方法确实存在限制，即没有像 CSS 背景那样的可重复选项。

请注意，此示例使用 Tailwind CSS。

<div className="h-screen">
    <div className="absolute -z-10">
        <Image
            src="/some.jpeg"
            layout="fill"
            objectFit="cover"
            quality={100}
        />
    </div>
    <div> Some overlay things go in here </div>
</div>

Answer 16

使用动态图片

首先像这样声明样式

 let style = {
        backgroundImage: "url(" + props.image + ")",
    }

然后

<div style={style}>
    <div className="content">content here</div>
</div>

Answer 17

正如 nextjs 文档所说 (https://nextjs.org/docs/basic-features/static-file-serving):

Next.js can serve static files, like images, under a folder called public in the root directory.

Files inside public can then be referenced by your code starting from the base URL (/).

因此，从 public 文件夹中引用我们的图片的正确方法是：

CSS 示例：

background-image: url('/your-image.jpg');

JSX 示例：

import Image from 'next/image'
<Image src="/your-image.jpg" alt="Image description" width="64" height="64" />

Answer 18

我正在使用 Next.js v12.0.10，当我尝试以下操作时无法加载 css 背景图片：

<div style={{ backgroundImage: "url('/public/a.jpg')"}}>
</div>

但是当我在图像 url 中省略 /public 时，一切正常：

<div style={{ backgroundImage: "url: '/a.jpg')"}}>
</div>

就像伊万上面说的：

Files inside public can then be referenced by your code starting from the base URL (/).

Next.js 背景图像 css 属性 无法加载图像

Next.js background-image css property cant load the image

html

css

reactjs

next.js

Next.js 背景图像 css 属性无法加载图像