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

HTML React.js

DavaidTony宝儿

2020-04-07

问题只是我正在尝试访问静态图像以在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

该图像没有出现,并且没有错误发生,然后,我尝试在浏览器中输入website-url + console.log结果该图像出现了!

第4117篇《Next.js background-image css属性无法加载图像》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
Lynn 2022.03.04

有解决吗

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android