如何在 Next.js 中添加 img

Next.js 是一个非常流行的 React 服务端渲染框架，它提供了很多便利的功能和 API。在 Next.js 中如何添加图片呢？本文将为大家提供详细的介绍。

通过标准的标签添加图片

在 Next.js 中，我们可以通过标准的 <img> 标签来添加图片。和在 React 中一样，你应该把图片放在 public 目录中, 然后通过相对路径引用它们：

<img src="/images/example.jpg" alt="example" />

这会在服务端渲染时将 <img> 标签渲染成完整的 HTML。当浏览器加载此 HTML 时，它将下载图片并显示它。

请注意，在 public 目录中的文件，可以通过其文件名访问，而不需要始终使用 public 前缀。请参见上面的示例中的 src 属性。

通过Next.js的 Image组件添加图片

在 Next.js 中有一种更先进的方法来优化图像加载，即使用 next/image 组件。该组件内部使用了一些技术，如 lazy load 和基于浏览器视口的图像优先级调整。此外，Next.js Image 组件支持多种图片格式及其优化，如：WebP、AVIF 等。

要在 Next.js 中使用 Image 组件，向 next/image 组件提供一个src值即可。

import Image from 'next/image'

export default function MyImage() {
  return (
    <Image
      src="/images/example.jpg" // 图片路径
      alt="example"
      width={500} // 图片宽度
      height={500} // 图片高度
    />
  )
}

注意：在 Image 组件中，不支持把图片放在 assets 或其他目录下，必须放在 public 目录里。

调整图片大小

无论是使用 <img> 标签还是 next/image 组件，都可以设置自定义的宽度和高度。我们常常需要调整图片的尺寸以适应我们的页面，这可以通过给组件传递 width 和 height 属性来完成。

<!-- 使用标签 -->
<img src="/images/example.jpg" alt="example" width="500" height="500" />

<!-- 使用组件 -->
<Image src="/images/example.jpg" alt="example" width={500} height={500} />

总结

在 Next.js 中添加图片非常简单，您可以使用标准的 <img> 标签或 Next.js 提供的 Image 组件。Image 组件具有很多高级功能，如懒加载和浏览器视口优先级，是个不错的可选项。无论你使用哪种方法，请确保将图片放在 public 目录中，并正确引用。