资产

Next.js可以在顶级public目录下提供静态资产，如图像。内部文件可以从应用程序的根目录引用，类似于pages。public

该目录还可用于 、Google 站点验证和任何其他静态资产。查看静态文件服务文档以了解更多信息。public``````robots.txt

下载您的个人资料图片

首先，让我们检索您的个人资料图片。

  • 以格式下载您的个人资料图片（或使用此文件）。.jpg
  • 在public目录内创建一个目录。images
  • 将图片另存为目录中。profile.jpg``````public/images
  • 图像大小可以是 400px x 400px 左右。
  • 您可以直接在public目录下删除未使用的 SVG 徽标文件。

未优化的图像

使用常规HTML，您可以按如下方式添加个人资料图片：

Your Name

但是，这意味着您必须手动处理：

  • 确保您的图像在不同的屏幕尺寸上具有响应性
  • 使用第三方工具或库优化图像
  • 仅在图像进入视口时加载图像

以及更多。相反，Next.js 提供了一个开箱即用的组件来为您处理此问题。Image

图像组件和图像优化

next/image是HTML元素的扩展，是为现代网络而发展而来的。<img>

Next.js还默认支持图像优化。这允许在浏览器支持时以WebP等现代格式调整大小，优化和提供图像。这样可以避免将大图像传送到具有较小视口的设备。它还允许Next.js自动采用未来的图像格式，并将其提供给支持这些格式的浏览器。

自动图像优化适用于任何图像源。即使图像由外部数据源（如 CMS）托管，它仍然可以进行优化。

使用图像组件

Next.js 不是在生成时优化映像，而是根据用户请求按需优化映像。与静态站点生成器和纯静态解决方案不同，无论是发布 10 张图像还是 1000 万张图像，您的构建时间都不会增加。

默认情况下，图像是延迟加载的。这意味着您的页面速度不会因视口外的图像而受到惩罚。图像在滚动到视口时加载。

图像的呈现方式总是避免累积布局偏移，这是Google将在搜索排名中使用的核心Web Vital。

下面是一个使用 next/image 来显示我们的个人资料图片的示例。和 属性应该是所需的渲染大小，其纵横比应与源图像相同。height``````width

**注意：**稍后我们将在"抛光布局"中使用此组件，无需复制它。

import Image from ’next/image'

const YourComponent = () => ( <Image src="/images/profile.jpg" // Route of the image file height={144} // Desired size with correct aspect ratio width={144} // Desired size with correct aspect ratio alt=“Your Name” /> )

要了解有关自动图像优化的更多信息，请查看文档。

若要了解有关该组件的详细信息，请查看Nextjs/images的 API 参考。Image