资产

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

该目录还可用于 、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