简介

Tailwind Starter Blog 博客模板开箱即用地支持 Next.js 内置的 Image 组件，并且会自动将 Markdown 或 MDX 文档中的默认 img 标签替换为 Next.js 提供的 Image 组件。

用法

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

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image src="/me.png" alt="Picture of the author" width={500} height={500} />
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

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

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

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

另外，由于我们使用的是 MDX，也可以直接使用 Image 组件！请注意，你需要提供一个固定的宽度和高度。而 img 标签方法则会自动解析图片尺寸。dimension automatically.

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

注意：如果你尝试保存图片，如果你的浏览器支持，它会是 WebP 格式！

Photo by YUCAR FotoGrafik on Unsplash

优点

• 更小的图片尺寸：WebP 格式比 JPEG 小约 30%。

• 响应式图片：根据用户的视口尺寸提供正确的图片大小。

• 延迟加载（Lazy Loading）：图片在用户滚动到视口时才加载。

• 避免累积布局偏移（Cumulative Layout Shift）。

• 按需优化而非构建时优化：不会增加构建时间！

局限性

• 由于依赖于 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。