Next.js【详解】内置组件 —— 图片 Image

Next.js 内置的 next/image 图像优化组件，通过以下功能提升图像性能：

• 图片格式统一转换为 WebP，并根据设备尺寸自动调整分辨率
• 避免了图片加载过程中的布局偏移（Layout Shift）
• 默认情况下，图像在进入视窗时才加载，可选择使用模糊占位符。
• 通过设置尺寸属性，图像可以根据屏幕大小自适应。

图片存于目录 public\images 中

import Image from "next/image";

本地图片

      <Image
        src="/images/风景.png"
        alt="图片-风景"
        width={600}
        height={400}
        // 开启响应式 -- 根据宽高比调整图像尺寸，确保在不同设备上始终显示最佳比例。
        layout="responsive" 
        // 禁用懒加载 -- 可提高页面加载图片的优先级
        priority
        // 图片加载时的占位图
        blurDataURL="/images/img_loading.png"
      />

远程图片

需先在 next.config.ts 中配置图片域名

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // 配置图片域名
  images: {
    remotePatterns: [
      {
        hostname: "se2.360simg.com",
      },
    ],
  },
};

export default nextConfig;

再在页面中使用

      <Image
        src="https://se2.360simg.com/t01d8935450f8ea8ffb.png"
        alt="图片-远程"
        width={600}
        height={400}
        priority // 提高页面加载时的优先级
        blurDataURL="/images/img_loading.png"
      />

响应式图片 sizes

<Image
        fill
        src="/example.png"
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      />

图片加载占位符 blurDataURL

• 需同时设置 placeholder="blur"
• blurDataURL 的值为 base64的图片（建议用极小的）

import Image from "next/image";

const fs = require("fs");

const imagePath = "./public/images/img_loading.png";
const imageBuffer = fs.readFileSync(imagePath);
const base64Image = imageBuffer.toString("base64");
const blurDataURL = `data:image/jpeg;base64,${base64Image}`;

export default function Page() {
  return (
    <>
      <Image
        src="https://se2.360simg.com/t01d8935450f8ea8ffb.png"
        width={600}
        height={400}
        placeholder="blur"
        // 图片加载时的占位图
        blurDataURL={blurDataURL}
      />
    </>
  );
}

更多功能

见官网 https://nextjs.org/docs/app/api-reference/components/image