[解決済み] Next.js の background-image css プロパティで画像が読み込めない。

質問

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の結果を入力しようとしたところ、画像が表示されました!

どうすればいいですか？

JSXスタイルを使用し、position absoluteプロパティを追加したところ、正常に動作するようになりました。

こんな感じ。

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