Question

问题很简单，我正在尝试访问静态图像以在React的内联backgroundImage属性中使用。

我正在使用reactjs和next.js，然后在next.js中添加图像时遇到了问题，但是通过使用名为Next.js + Images的图像加载器来解决了此问题，

现在我可以使用普通的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

你所要做的就是改变网址

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

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

Answer 2

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

赞：

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

Answer 3

next-images包对我有用。

第一：

getenv('ENV')

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

yarn add next-images

那你可以做：

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

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

Answer 4

您可以将图像放在公用文件夹中，并按以下方式访问它：

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

如果将图像放在“ / 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 7

/static 目录已被弃用。任何尝试使用它的人都可能会在他们的控制台中收到错误消息，但这里的链接包含 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 属性来解决这个问题：

Sample text. 17.602 (17.602.html#FAR_17_602) Sample closing text.

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

{ img.src }

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

Next.js background-image css属性无法加载图像

8 个答案: