react中img标签如何
React 中使用 <img> 标签
在 React 中，<img> 标签的使用方式与 HTML 类似，但需要注意一些 React 特有的属性和最佳实践。
基本语法
<img src="image-path.jpg" alt="描述文字" />动态加载图片
可以通过变量或状态动态设置图片路径：
const imageUrl = require('./assets/image.jpg');
function ImageComponent() {
return <img src={imageUrl} alt="动态图片" />;
}添加样式
使用 className 或内联样式：
<img
src="image.jpg"
alt="带样式的图片"
className="custom-class"
style={{ width: 100, height: 'auto' }}
/>事件处理
可以添加事件监听器如 onClick：
<img
src="image.jpg"
alt="可点击图片"
onClick={() => console.log('图片被点击')}
/>性能优化
使用 loading="lazy" 实现懒加载：
<img
src="large-image.jpg"
alt="懒加载图片"
loading="lazy"
/>注意事项
- 必须包含
alt属性以提升可访问性 - 在 React 中属性名使用驼峰命名（如
className） - 使用
require或import引入本地图片资源
