react如何查看图片
在React中查看图片的方法
使用img标签直接显示图片
将图片文件放在项目的public或src目录下，通过相对路径引用。例如放在public/images中：
<img src="/images/example.jpg" alt="示例图片" />放在src/assets中则需要先导入：
import exampleImg from './assets/example.jpg';
function App() {
return <img src={exampleImg} alt="示例图片" />;
}动态加载图片
当图片路径需要动态生成时，使用require.context或模板字符串：
const imagePath = require(`./assets/${imageName}.jpg`).default;
// 或
<img src={`${process.env.PUBLIC_URL}/images/${dynamicPath}.jpg`} />使用第三方库实现图片查看器
安装react-image-viewer等库实现放大预览功能：
npm install react-image-viewer使用示例：
import ImageViewer from 'react-image-viewer';
function Gallery() {
return (
<ImageViewer
src={['/image1.jpg', '/image2.jpg']}
isOpen={true}
onClose={() => {}}
/>
);
}懒加载优化性能
使用react-lazyload实现图片懒加载：
npm install react-lazyload实现方式：
import LazyLoad from 'react-lazyload';
<LazyLoad height={200}>
<img src="large-image.jpg" alt="懒加载图片" />
</LazyLoad>注意事项
- 生产环境需要确保图片路径正确，建议使用webpack的file-loader处理图片
- 大尺寸图片应进行压缩优化，推荐使用sharp或imagemin工具
- 动态图片路径需做好错误处理，避免加载失败导致页面异常
