next/image 是 Next.js 对 <img> 标签的优化替代品。它自动应用一系列图像性能最佳实践，否则你需要手动实现。
tsx
;
() {
(
);
}
next/image 是 Next.js 对 <img> 标签的优化替代品。它自动应用一系列图像性能最佳实践，否则你需要手动实现。
;
() {
(
);
}
srcset — 生成多个尺寸，以便每个设备下载合适的版本。priority 覆盖）。width/height（或 fill）预留空间，防止图像加载时页面跳动。placeholder="blur" 在加载时显示微小的模糊预览。<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
当图像应填充其定位的父元素时，使用 fill（而非固定宽度/高度）— 常见于 hero/cover 图像。
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
图像通常是页面上最大的资源，也是 Core Web Vitals (LCP, CLS) 性能下降的主要原因。next/image 自动化了调整大小、现代格式、响应式 srcset、懒加载和防止布局偏移 — 将一项主要的性能工作转变为单个组件，priority 用于 LCP 图像，这是你必须记住的唯一参数。