Hintergrundbild anzeigen

Question

<p>Ich möchte meinem Projekt ein Hintergrundbild hinzufügen, aber es funktioniert nicht. </p><p>Ich habe versucht, ein Hintergrundbild global hinzuzufügen, aber es hat nicht funktioniert. Dies ist der Homepage-Code von Next.js. </p><p><br /></p> <pre class="brush:php;toolbar:false;">import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) Standardfunktion index() exportieren { zurückkehren ( <div className="myindex">           dcmkl </div> ) } Dies ist die Datei global.css</pre> <p>Stil hier</p> <pre class="brush:php;toolbar:false;">.myclass{ Höhe: 1000px; Breite: 1000px; Hintergrundbild: url('./pexels-johannes-plenio-1103970.jpg'); }</pre> <p><br /></p>

Answer 1

最佳的存储本地图片的位置是您项目根目录下的公共文件夹（及其子文件夹）。您可以像这样从该位置导入图片到您的页面或组件中

import someImage from '../public/some-path.jpg'

然后应用内联样式：

<div style={{
    backgroundImage: `url(${someImage})`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    width: '100%',
    height: '100%'
}}>
</div>