react 如何引背景图片
在 React 中引入背景图片的方法
方法一：通过 CSS 内联样式
在组件中直接使用 style 属性设置背景图片，注意使用模板字符串或 url() 包裹路径：
<div style={{
backgroundImage: `url(${require('./background.jpg')})`,
backgroundSize: 'cover',
height: '100vh'
}}>
{/* 内容 */}
</div>方法二：通过 CSS 文件导入
创建独立的 CSS 文件，通过 background-image 属性引入图片：
/* styles.css */
.background {
background-image: url('./background.jpg');
background-size: cover;
height: 100vh;
}在组件中引入 CSS 文件并应用类名：
import './styles.css';
function App() {
return <div className="background">{/* 内容 */}</div>;
}方法三：使用公共文件夹（public）
将图片放入 public 文件夹，直接通过绝对路径引用：
<div style={{
backgroundImage: 'url(/background.jpg)',
backgroundSize: 'cover'
}}>
{/* 内容 */}
</div>注意事项
- 使用
require时需确保项目配置支持（如 webpack） - 动态路径建议使用
import语法配合模板字符串 - 生产环境需考虑图片优化和 CDN 部署
