Tunjukkan imej latar belakang

Question

<p>Saya mahu menambah imej latar belakang pada projek saya, tetapi ia tidak berfungsi. </p><p>Saya cuba menambah imej latar belakang secara global, tetapi ia tidak berjaya. Ini ialah kod halaman utama Next.js. </p><p><br /></p> <pre class="brush:php;toolbar:false;">import { Inter } daripada 'next/font/google' const inter = Inter({ subset: ['latin'] }) eksport indeks fungsi lalai() { kembali ( <div className="myindex">           dcmkl </div> ) } ini ialah fail global.css</pre> <p>Gaya di sini</p> <pre class="brush:php;toolbar:false;">.myclass{ ketinggian: 1000px; lebar: 1000px; imej latar belakang: url('./pexels-johannes-plenio-1103970.jpg'); }</pre> <p><br /></p>

Answer 1

Tempat terbaik untuk menyimpan imej tempatan ialah folder awam (dan subfoldernya) dalam akar projek anda. Anda boleh mengimport imej dari lokasi ini ke halaman atau komponen anda seperti ini

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

Kemudian gunakan gaya sebaris:

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