Next.js Image 组件

内置图片组件，扩展原生 <img>。

优势

特性	说明
懒加载	默认只在可视区域内才加载
自动优化	转 WebP/AVIF，按需缩放
防 CLS	强制设定宽高，防止布局抖动
占位符	blur 占位图

用法

import Image from 'next/image'

// 本地图片（自动获取尺寸）
<Image src="/hero.png" alt="hero" width={800} height={600} priority />

// 远程图片（需配置域名白名单 next.config.ts）
<Image src="https://cdn.example.com/photo.jpg" alt="photo"
  width={400} height={300} placeholder="blur" />

priority 用于首屏大图，跳过懒加载。