【Nextjs15學習筆記】在 Nextjs 中如何導入圖片

4 天前

內容目錄 隱藏

使用 img 標籤

在 Next.js 中，通過 import 導入的圖片會是一個 物件（Object），這是因為 Next.js 自帶的圖片優化功能會自動對圖片進行處理。

import Link from "next/link";
import logoImg from '@/assets/logo.png';

export default function MainHeader() {
  return (
    <header>
      <Link href="/">
        <img src={logoImg.src} alt="NextLevel Food" />
      </Link>
    </header>
  )
}

在上述代碼中，logoImg 是一個物件，包含以下屬性：

{
  src: '/_next/static/media/logo.223befd0.png',
  width: 1024,
  height: 1024,
  blurDataURL: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAABE0lEQVR42gEIAff+AP///wD56+oZ+e3pJPr4+BHu6ucu8/XuGP///wD///8AAPv7+w3qy8pO57KHpdu5rmuikoCwxMWZePfz6xb///8AAOLNx1HJlnTHw5JW86+GZfOndTvze2Qn9LGLb7L47egkAKu7iYiWm0z8sIE5/62BKf++kE7/mYNb/6JfOvzNp5CeAJywcbKkg1T/nXJS/7VrFf/Kghj/oWE4/7F+Tv+1rnTCAOrauFbDkUTxtHk6/6R5Sv+1kUj/lns0/5udT/jWy6SGAPv79wvcyJ2I05hT6NR5O/rTlE700qVZ2ujQmHr89/ARAP///wD6/PsJ6e3jN+DbwV/u3cNM+OvgJf79+wT///8AIwaqZ2TJKnEAAAAASUVORK5CYII=',
  blurWidth: 8,
  blurHeight: 8
}

因此，當我們使用圖片時，需要通過 logoImg.src 來獲取實際的路徑。

next/image 組件

官方推薦在 Next.js 中使用內建的 next/image 組件代替傳統的 <img>，這樣可以充分利用 Next.js 的圖片優化功能。

使用 next/image 後，不再需要手動訪問 logoImg.src，直接將圖片物件傳給 src 屬性即可。以下是重構後的程式碼：

import Link from "next/link";
import Image from "next/image";
import logoImg from '@/assets/logo.png';

export default function MainHeader() {
  return (
    <header>
      <Link href="/">
        <Image src={logoImg} alt="A plate with food on it" />
      </Link>
    </header>
  )
}

對比一下使用 img 和 next/image 渲染的圖像元素，會發現 Image 組件添加了一些額外的屬性：

loading="lazy" 確保影像延遲載入
自動推斷圖像的 width, height
srcset 確保根據訪問這個網站所使用的視窗和設備加載不同大小的圖像

並且 next/image 會自動以用戶正在使用的瀏覽器的最佳文件格式提供圖像。

例如使用 Chrome 訪問頁面，則作為 WebP 圖像。

設置圖片 priority

出現以下 warning，代表這個圖片並不需要 lazy loading，需要盡快加載：

Image with src "/_next/static/media/logo.223befd0.png" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.

只需要在 Image 組件上設置 priority={true} ，即可確保在頁面載入時沒有不必要的內容移動或者閃爍。

<Image src={logoImg} alt="A plate with food on it" priority={true} />

補充：Image 組件的類型定義

以下是 next/image 組件與靜態圖片數據的部分類型定義，便於理解其工作機制：

Image 組件類型：

export declare const Image: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "height" | "width" | "loading" | "ref" | "alt" | "src" | "srcSet"> & {
    src: string | import("../shared/lib/get-img-props").StaticImport;
  	...
} & React.RefAttributes<HTMLImageElement | null>>;

靜態圖片數據類型（StaticImageData）：

export interface StaticImageData {
    src: string;
    height: number;
    width: number;
    blurDataURL?: string;
    blurWidth?: number;
    blurHeight?: number;
}