4. 图片

内置 <Image> 组件扩展了 HTML <img> 元素：

尺寸优化：自动为每台设备提供正确尺寸的图片，使用 WebP 等现代图片格式
视觉稳定性：在图片加载时自动防止布局偏移
更快的页面加载：使用原生浏览器懒加载，仅在图片进入视口时才加载，并可选使用模糊预览占位符。
资源灵活性：按需调整图片大小，即使图片存储在远程服务器上

import Image from 'next/image'
 
export default function Page() {
  return <Image src="" alt="" />
}

本地图片

根目录下创建一个名为 public 的文件夹来存储静态文件，然后可以以（ / ）为根目录，在代码中引用 public 中的文件

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"  // 引入的就是 /public/profile.png
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

远程图片

在 src 属性中放远程图片的地址即可