26 lines
742 B
Plaintext
26 lines
742 B
Plaintext
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>
|