显示背景图片

Question

<p>我想在我的项目中添加背景图片，但是它不起作用。</p><p>我尝试全局添加背景图片，但是它不起作用。这是Next.js的首页代码。</p><p><br /></p> <pre class="brush:php;toolbar:false;">import { Inter } from '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>