react如何添加图片
在React中添加图片的方法
使用import导入本地图片
将图片文件放在项目目录中（如src/assets），通过import语句引入后作为src属性值：
import logo from './assets/logo.png';
function App() {
return <img src={logo} alt="Company Logo" />;
}直接使用public目录中的图片
将图片放入public文件夹，通过绝对路径引用：
function App() {
return <img src="/images/logo.png" alt="Public Folder Image" />;
}使用在线图片URL
直接使用网络图片地址作为src：
function App() {
return (
<img
src="https://example.com/path/to/image.jpg"
alt="Online Image"
/>
);
}动态加载图片
通过require语法或模板字符串动态构建路径：
function DynamicImage({ imageName }) {
const imagePath = require(`./assets/${imageName}.png`);
return <img src={imagePath} alt="Dynamic Loaded" />;
}使用CSS背景图片
通过style属性或CSS模块设置背景图：
// 方法1：内联样式
<div style={{
backgroundImage: `url(${require('./assets/bg.jpg')})`,
width: '100%',
height: '200px'
}}></div>
// 方法2：CSS模块
import styles from './Image.module.css';
<div className={styles.background}></div>对应CSS文件：
.background {
background-image: url('./assets/bg.jpg');
background-size: cover;
}注意事项
- 必须包含alt属性以满足可访问性要求
- 生产环境建议对本地图片进行优化处理（如压缩）
- 使用webpack等构建工具时，可能需要配置file-loader处理图片
- 动态require语法在某些脚手架中可能需要额外配置
