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处理图片资源
