在 Web 开发中，图片是不可或缺的元素之一，它能够为网站增加趣味和视觉效果，提高用户体验。而在 Next.js 中，添加图片也是非常简单的。本文将介绍如何在 Next.js 页面中添加图片。
一、使用 <img> 标签
在 Next.js 中，可以像使用普通的 HTML 一样使用 <img> 标签来添加图片。只需要在 src 属性中指定图片的路径即可。
<img src="/images/example.jpg" alt="Example" />
在上面的代码中，我们指定了一个名为 example.jpg 的图片，它的路径为 public/images/example.jpg。在 Next.js 中，所有放在 public 目录下的文件都可以通过相对路径来访问。
二、使用 next/image 组件
除了使用 <img> 标签外，Next.js 还提供了一个优秀的图片组件 next/image，它可以自动优化图片大小、格式和加载方式，提高页面的性能和用户体验。下面是一个基本的使用示例：
-- -------------------- ---- ------- ------ ----- ---- ------------ -------- --------- - ------ - ----- ------ ------------------------- ------------- ----------- ------------ -- ------ - -展开代码
在上面的代码中，我们使用 next/image 组件来添加图片。与 <img> 标签不同的是，next/image 组件需要指定图片的宽度和高度，这可以让 Next.js 在运行时自动优化图片大小。此外，next/image 组件还可以自动选择最佳的图片格式和加载方式，从而提高页面的性能和用户体验。
三、使用 next/image 组件的高级功能
除了基本的使用方法外，next/image 组件还提供了一些高级功能，例如：
1. 自动优化图片大小和格式
在 next/image 组件中，可以通过指定 layout 属性来控制图片的大小和格式。常见的 layout 值包括：
fixed：指定图片的固定宽度和高度。intrinsic：指定图片的固定宽高比，宽度自适应。responsive：指定图片的宽度和高度自适应。
下面是一个使用 intrinsic 布局的示例：
<Image src="/images/example.jpg" alt="Example" width={500} height={500} layout="intrinsic" />
在上面的代码中，我们使用 intrinsic 布局来指定图片的宽高比为 1:1，宽度自适应。
2. 自动选择最佳的图片格式和加载方式
在 next/image 组件中，可以通过指定 priority 属性来控制图片的加载方式。常见的 priority 值包括：
true：指定图片优先加载。false：指定图片不优先加载。
下面是一个使用 priority 属性的示例：
<Image src="/images/example.jpg" alt="Example" width={500} height={500} priority={true} />
在上面的代码中，我们使用 priority 属性来指定图片优先加载。
3. 支持响应式图片
在 next/image 组件中，可以通过指定 srcSet 属性来支持响应式图片。srcSet 属性可以指定一组不同大小的图片，让浏览器根据屏幕尺寸自动选择最佳的图片。
下面是一个使用 srcSet 属性的示例：
-- -------------------- ---- ------- ------ ------------------------- ------------- ----------- ------------ --------- ------- --------------------------- -------- ---------------------------- -------- ---------------------------- -- --展开代码
在上面的代码中，我们使用 srcSet 属性来指定三张不同大小的图片，分别为 500 像素、1000 像素和 2000 像素。浏览器会根据屏幕尺寸自动选择最佳的图片。
四、总结
在 Next.js 中，添加图片非常简单，可以使用 <img> 标签或 next/image 组件来实现。而 next/image 组件不仅可以自动优化图片大小、格式和加载方式，还提供了许多高级功能，例如支持响应式图片、自动选择最佳的图片格式和加载方式等。因此，在实际开发中，我们可以根据需要选择合适的方法来添加图片，从而提高页面的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657189d2d2f5e1655da36e34
