简介

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

使用方法

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

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 组件。

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

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

另外，由于我们使用的是 mdx，我们可以直接使用图片组件！注意，你需要提供固定的宽度和高度。img 标签方法会自动解析尺寸。

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

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

图片作者 YUCAR FotoGrafik ，来自 Unsplash

优点

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

局限性

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