react如何画图片
在 React 中渲染图片的方法
使用 img 标签直接引入图片
将图片文件放入项目目录（如 public 或 src/assets），通过相对路径或绝对路径引用：
import React from 'react';
function App() {
return (
<div>
{/* 使用 public 目录下的图片 */}
<img src="/images/example.jpg" alt="示例图片" />
{/* 使用 import 引入的图片 */}
<img src={require('./assets/example.png')} alt="另一示例" />
</div>
);
}通过 import 动态加载图片
适合与构建工具（如 Webpack）配合使用，避免路径问题：
import React from 'react';
import exampleImage from './assets/example.png';
function App() {
return <img src={exampleImage} alt="动态加载的图片" />;
}使用 CSS 背景图
通过内联样式或 CSS 模块设置背景：
// 内联样式
<div style={{ backgroundImage: `url(${exampleImage})` }}></div>
// CSS 模块
import styles from './styles.module.css';
<div className={styles.imageBackground}></div>处理动态图片路径
当图片路径来自变量或 API 时，需确保路径正确：
function DynamicImage({ imageUrl }) {
return <img src={imageUrl} alt="动态路径图片" />;
}优化图片加载
添加 loading="lazy" 实现懒加载，或使用 width/height 避免布局偏移：
<img
src={exampleImage}
alt="优化图片"
loading="lazy"
width={500}
height={300}
/>注意事项
- 使用
alt属性提高可访问性 - 生产环境建议压缩图片
- 动态路径需验证安全性，防止 XSS 攻击
