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

问题描述

问题只是我试图访问静态图像以在 React 的内联 backgroundImage 属性中使用.

The issue simply is I'm trying to access a static image to use within an inline backgroundImage property within React.

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

i am working with reactjs and next.js then i faced an issue with adding images with next.js but fixed this by using image loader called : Next.js + Images,

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

now i could add images normally with normal html img tag

示例:<img src={ img }/> 这行得通.

但是当我尝试添加css背景图片如下:

but when i tried to add css background images as the following:

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 结果:

here was the console.log results :

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

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

the image doesn't appear and no errors happened then, i tried to type in the browser website-url + the console.log results the image appeared !

推荐答案

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

when i used JSX styles then added position absolute property it worked just fine.

像这样:

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

这篇关于Next.js background-image css 属性无法加载图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！