<DriveImage /> Component
The core React component for rendering Google Drive images with skeletons, lazy loading, and failover endpoints.
Overview
DriveImage supports standard <img> props, adaptive width sizing, responsive srcSet generation, and fallback placeholder states.
Code Example
drive-image.tsx
| 1 | <DriveImage |
| 2 | src="https://drive.google.com/file/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs/view" |
| 3 | alt="User Profile Avatar" |
| 4 | width={200} |
| 5 | height={200} |
| 6 | fade={true} |
| 7 | lazy={true} |
| 8 | /> |
Best Practices
- •Always provide 'width' and 'height' to prevent Layout Shift.
- •Enable 'lazy=true' (default) for images below the fold.
Performance Notes
Utilizes Next.js Image loader internally if configured, or falls back to optimized native <img loading='lazy'>.