react如何引入背景图片

在React中引入背景图片的方法

使用CSS内联样式 通过style属性直接设置背景图片，注意路径需正确且使用模板字符串包裹URL：

<div style={{ 
  backgroundImage: `url(${require('./background.jpg')})`,
  backgroundSize: 'cover',
  height: '100vh'
}}></div>

通过CSS文件引入 创建单独的CSS文件并导入组件中：

/* styles.css */
.background {
  background-image: url('./background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

在组件中应用：

import './styles.css';
function App() {
  return <div className="background"></div>;
}

动态背景图片处理 当需要根据状态动态切换背景时：

function App() {
  const [bgImage, setBgImage] = useState(require('./default.jpg'));

  return (
    <div style={{ backgroundImage: `url(${bgImage})` }}>
      {/* 内容 */}
    </div>
  );
}

使用public目录的图片 将图片放在public目录后可直接引用：

<div style={{ backgroundImage: "url(/background.jpg)" }}></div>

注意事项

• Webpack项目需要配置file-loader处理图片
• 建议优化大尺寸背景图防止加载延迟
• 移动端需考虑background-size: contain适配不同屏幕