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 引入本地图片资源