NextJs basic¶
Navigation¶
Link
Layout¶
RootLayout
{children}
Loading¶
loading.tsx
Image¶
property¶
layout¶
- fill
- 作为bg来填充容器
- fixed
- 固定大小的图片
- responsive
- 可以根据容器大小来调整
- intrinsic
- 可以调整,不会超过原始的尺寸
objectFit¶
- cover
- 会填满 但可能被裁剪
- contain
- 尽可能保持比例,但可能留白
- fill
- 会填满 但可能变形
- scale-down
- 会缩减到最小,但不会裁剪,也不会比原来的大
- none
- 保持原始尺寸
本身的属性的例子¶
<Image
src={logo}
width={500}
height={500}
quality={100}
alt="logo"
placeholder="blur"
/>
在外面套用div的例子¶
<div className="relative aspect-square col-span-2">
<Image
src={logo}
fill
alt="logo"
objectFit="contain"
className="object-contain"
/>
</div>