From eab546a7b6ee7f995828ba3264d07a9b12fa9c1e Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Wed, 6 Apr 2022 11:42:49 +0800
Subject: [PATCH] Add: image processing

---
 components/PostLayout.js |  1 -
 pages/posts/images.mdx   | 25 +++++++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 pages/posts/images.mdx

diff --git a/components/PostLayout.js b/components/PostLayout.js
index 31e41e8..ae8994d 100644
--- a/components/PostLayout.js
+++ b/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={{
diff --git a/pages/posts/images.mdx b/pages/posts/images.mdx
new file mode 100644
index 0000000..98d404f
--- /dev/null
+++ b/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>