react实现图片加载

实现图片加载的基本方法

在React中实现图片加载可以通过多种方式完成，包括直接使用<img>标签、动态导入或结合第三方库优化体验。以下是几种常见方法：

使用<img>标签直接加载

function ImageComponent() {
  return (
    <img 
      src="path/to/image.jpg" 
      alt="Description" 
      onLoad={() => console.log('Image loaded')}
      onError={() => console.error('Error loading image')}
    />
  );
}

动态导入图片（适用于Webpack环境）

import React from 'react';

function ImageComponent() {
  const image = require('./image.jpg').default;
  return <img src={image} alt="Dynamic Import" />;
}

实现懒加载优化性能

对于长页面或大量图片的场景，懒加载可以显著提升性能：

使用原生loading="lazy"属性（现代浏览器支持）

<img 
  src="image.jpg" 
  loading="lazy" 
  alt="Lazy Loaded" 
/>

通过Intersection Observer API实现

import React, { useRef, useEffect } from 'react';

function LazyImage({ src, alt }) {
  const imgRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          imgRef.current.src = src;
          observer.unobserve(imgRef.current);
        }
      });
    });

    observer.observe(imgRef.current);
    return () => observer.disconnect();
  }, [src]);

  return <img ref={imgRef} alt={alt} />;
}

处理加载状态和错误

提升用户体验需要处理加载中和错误状态：

function ImageWithStatus({ src, alt }) {
  const [status, setStatus] = React.useState('loading');

  return (
    <div>
      {status === 'loading' && <div>Loading...</div>}
      {status === 'error' && <div>Failed to load image</div>}
      <img
        src={src}
        alt={alt}
        onLoad={() => setStatus('loaded')}
        onError={() => setStatus('error')}
        style={{ display: status === 'loaded' ? 'block' : 'none' }}
      />
    </div>
  );
}

使用第三方库简化实现

以下流行库可以简化图片加载逻辑：

• react-lazyload: 提供简单的懒加载组件

  
  import LazyLoad from 'react-lazyload';

```

• react-image: 支持错误处理和多种加载源

  
  import { Img } from 'react-image';

<Img src={['primary.jpg', 'fallback.jpg']} alt="With Fallback" loader={

} unloader={} />

### 响应式图片实现

适应不同屏幕尺寸的图片加载方案：

使用`srcSet`属性
```jsx
<img
  src="small.jpg"
  srcSet="medium.jpg 1000w, large.jpg 2000w"
  sizes="(max-width: 600px) 480px, 800px"
  alt="Responsive"
/>

配合<picture>元素

<picture>
  <source media="(min-width: 1200px)" srcSet="large.jpg" />
  <source media="(min-width: 768px)" srcSet="medium.jpg" />
  <img src="small.jpg" alt="Adaptive" />
</picture>

以上方法可根据具体需求组合使用，平衡功能实现与性能优化。