顯示背景圖片

Question

<p>我想在我的專案中添加背景圖片，但是它不起作用。 </p><p>我嘗試全域添加背景圖片，但它不起作用。這是Next.js的首頁程式碼。 </p><p><br /></p> <pre class="brush:php;toolbar:false;">import { Inter } 從 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export default function index() {  return (       <div className="myindex">            dcmkl       </div>  ) } this is global.css file</pre> <p>樣式在這</p> <pre class="brush:php;toolbar:false;">.myclass{  height: 1000px;  width: 1000px;  background-image: 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>