export const meta = {
  "title": "图片处理",
  "date": "2022-03-05",
  "description": "使用 Next.js 的图片组件对图像进行预处理。"
};

import PostLayout from '../../components/PostLayout';
import guguguImage from '../../public/images/gugugu.webp';
import Image from 'next/image';

图片示例

<Image src={guguguImage} layout="responsive" />

此处使用了 Next.js 的 `Image` 组件。优点包括：

- 在构建时图片预先被转换成多种分辨率，根据用户设备大小返回相应的分辨率图片。

- 提升加载速度。

- 在未加载完整图片时显示一个模糊的预览图。

- 防止 *加载时布局移动*

export default ({children}) => <PostLayout meta={meta}>{children}</PostLayout>