react如何引入图片
在React中引入图片的方法
使用import直接引入
将图片文件放在项目目录中（如src/assets），通过ES6的import语法引入：
import logo from './assets/logo.png';
function App() {
return <img src={logo} alt="Logo" />;
}使用require动态引入 适用于条件渲染或动态路径的场景：
function ImageComponent({ imageName }) {
const imagePath = require(`./assets/${imageName}.png`);
return <img src={imagePath} alt={imageName} />;
}通过public目录引用 将图片放入public目录，直接使用绝对路径：
<img src="/images/logo.png" alt="Public Logo" />注意：public目录中的文件不会被webpack处理，需手动管理缓存问题。
CSS背景图片引入 在CSS模块中通过相对路径引入：
/* styles.module.css */
.header {
background-image: url(../assets/header-bg.jpg);
}注意事项
- 使用create-react-app创建的项目默认支持常见图片格式（png/jpg/svg等）
- SVG文件可作为React组件直接引入：
import { ReactComponent as Logo } from './logo.svg'; - 生产环境建议对图片进行压缩优化
- 动态路径需考虑webpack的上下文限制
