react如何显示图片

在React中显示图片的方法

使用本地图片 将图片文件放入项目的public或src目录中。如果放在public文件夹中，可以直接通过路径引用：

<img src="/images/example.jpg" alt="示例图片" />

如果图片放在src目录中，需要先导入再使用：

import exampleImage from './images/example.jpg';

function App() {
  return <img src={exampleImage} alt="示例图片" />;
}

使用网络图片 直接使用图片的URL链接：

<img src="https://example.com/image.jpg" alt="网络图片" />

使用require语法 在某些配置下可以使用require动态加载图片：

<img src={require('./images/example.jpg').default} alt="示例图片" />

使用背景图片 通过CSS样式设置背景图片：

<div style={{ 
  backgroundImage: `url(${exampleImage})`,
  width: '100px',
  height: '100px'
}}></div>

优化图片加载 可以使用loading="lazy"属性实现懒加载：

<img src={exampleImage} alt="示例图片" loading="lazy" />

注意事项

• 确保图片路径正确
• 始终为图片添加alt属性以提高可访问性
• 对于大量图片考虑使用CDN或图片优化服务
• 在开发环境下可能需要配置webpack处理图片资源