Next.js background

本文介绍了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

/_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>