Next.js 中的图片处理

简介

tailwind 入门博客开箱即用地支持 Next.js 内置的图片组件，并自动将 markdown 或 mdx 文档中的默认图片标签替换为提供的 Image 组件。

使用方法

要在新的页面路由 / JavaScript 文件中使用，只需导入 image 组件并调用它，例如：

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>我的主页</h1>
      <Image src="/me.png" alt="作者照片" width={500} height={500} />
      <p>欢迎来到我的主页！</p>
    </>
  )
}

export default Home

对于 markdown 文件，可以使用默认的图片标签，默认的 img 标签会在构建过程中被 Image 组件替换。

假设我们在 static/images/ocean.jpg 中有一个名为 ocean.jpg 的文件，以下代码行将生成优化后的图片。

![ocean](/static/images/ocean.jpg)

或者，由于我们使用的是 mdx，我们可以直接使用 image 组件！请注意，您必须提供固定的宽度和高度。img 标签方法会自动解析尺寸。

<Image alt="ocean" src="/static/images/ocean.jpg" width={256} height={128} />

注意：如果您尝试保存图片，它是 webp 格式的（如果您的浏览器支持的话）！

/static/images/ocean.jpeg

照片由 YUCAR FotoGrafik 拍摄 发布于 Unsplash

优势

· 更小的图片尺寸，使用 Webp 格式（比 jpeg 小约 30%） · 响应式图片 - 根据用户的视口提供正确尺寸的图片 · 懒加载 - 图片在滚动到视口时加载 · 避免 累积布局偏移 (CLS) · 按需优化而非构建时优化 - 不会增加构建时间！

局限性

· 由于依赖 next/image，除非您使用像 Cloudinary 或 Imgix 这样的外部图片 CDN，否则实际上需要使用 Vercel 进行托管。这是因为该组件的行为类似于调用高度优化的图片 CDN 的无服务器函数。 如果您不想受限于 Vercel，可以移除 lib/mdx.js 中 remarkPlugins 里的 imgToJsx。这样可以避免替换默认的 img 标签。 或者，可以等待构建时图片优化功能的支持。另一个库 next-optimized-images 实现了这个功能，尽管它需要通过 webpack 转换图片，而这里没有这样做。 · 来自外部链接的图片不会通过 next/image 处理 · 所有图片必须存储在 public 文件夹中，例如 /static/images/ocean.jpeg