react中如何展示img
在React中展示图片（<img>）可以通过多种方式实现，具体取决于图片的存储位置和项目结构。以下是常见的方法：
使用本地图片
将图片文件放在项目的public或src目录中，通过相对路径或绝对路径引用。
从public目录引用：
图片放在public/images文件夹中，直接通过绝对路径引用：
<img src="/images/example.jpg" alt="示例图片" />从src目录引用：
图片放在src/assets文件夹中，通过import引入：
import exampleImg from './assets/example.jpg';
function App() {
return <img src={exampleImg} alt="示例图片" />;
}使用动态路径
通过变量动态传递图片路径：
function ImageComponent({ imgUrl, altText }) {
return <img src={imgUrl} alt={altText} />;
}
// 使用方式
<ImageComponent imgUrl="/images/dynamic.jpg" altText="动态图片" />使用在线图片
直接使用网络图片的URL：
<img src="https://example.com/image.jpg" alt="网络图片" />添加样式和属性
通过className或style控制图片样式：
<img
src="/images/styled.jpg"
alt="带样式的图片"
className="custom-class"
style={{ width: '200px', borderRadius: '8px' }}
/>懒加载优化
使用loading="lazy"实现图片懒加载：
<img
src="/images/large-image.jpg"
alt="懒加载图片"
loading="lazy"
/>响应式图片
通过srcSet适配不同分辨率：
<img
src="/images/default.jpg"
srcSet="/images/small.jpg 480w, /images/medium.jpg 1024w"
sizes="(max-width: 600px) 480px, 1024px"
alt="响应式图片"
/>注意事项
- 路径问题：确保路径正确，尤其是在生产环境中。
alt属性：始终为图片添加描述性alt文本以提升可访问性。- 性能优化：对大图使用压缩或懒加载技术。
