Add: image processing

components/PostLayout.js

@@ -9,7 +9,6 @@ const components = {
   h4: (props) => <Typography variant="h4" {...props} />,
   h5: (props) => <Typography variant="h5" {...props} />,
   h6: (props) => <Typography variant="h6" {...props} />,
-  img: (props) => <Image alt={props.alt} layout="responsive" {...props} />,
   code: (props) => (
     <code
       style={{

pages/posts/images.mdx

@@ -0,0 +1,25 @@
+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>