Tìm hiểu next/image

Bài đăng này đã không được cập nhật trong 2 năm

Với Nextjs phiên bản 10, một image component đã được giới thiệu để cung cấp những tối ưu hiệu năng về image khi làm việc với Nextjs.

Với việc đọc tài liệu thì có thể bạn sẽ rất mong lung với những khái niệm khá mới và mơi hồ. Nên mình khuyên các bạn nên chiến thực tế để hiểu được cách nó hoạt động thay vì chỉ đọc Document.

Một ví dụ sử dụng Image component đơn giản:

// pages/index.js

import Image from "next/image";
import styles from "../styles/Home.module.css";

// 1000x800
import Picture from "../public/picture.jpeg";

export default function Home() {
 return (
   <div className={styles.container}>
     <Image src={Picture} alt="picture"/>
   </div>
 );
}
export default Home

Những props được yêu cầu khi sử dụng Image.

`src`

Là một file ảnh được import tĩnh, như ví dụ trên.
Là một path string. Có thể là external URL hoặc internal path tuỳ vào loader.

`height` và `width`

Phải là number tương ứng với đơn vị px. Không sử dụng cho statically imported images hoặc layout="fill"

Những props tuỳ sự lựa chọn của bạn trong từng trường hợp:

`layout`

Gồm 4 giá trị:

fixed: Kích thước ảnh sẽ không thay đổi khi bạn thay đổi kích thước viewport. nó giống như một img bình thường
intrinsic (default): Ảnh sẽ được thu nhỏ kích thước đối với viewport nhỏ hơn và phóng to đối với viewport lớn hơn. Nhưng nó vẫn giữ kích thước gốc khi viewport lớn hơn. (Giải thích 1)
responsive: Ảnh sẽ được thu nhỏ kích thước đối với viewport nhỏ hơn và phóng to đối với viewport lớn hơn. Chú ý thằng này có thể hoạt động không chính xác nếu thằng cha là một giá trị khácdisplay: block như là flex hoặc grid
fill: Ảnh sẽ được kéo dài width và height theo kich thước của parent element, muốn vậy thằng cha phải có thuộc tính position: relative. Với layout này bạn có thể đi kèm với prop objectFit(nó tương tự như trong css)

Hãy thử từng layout để thấy được sự thay đổi

 // pages/index.js
 
import Image from "next/image";
import styles from "../styles/Home.module.css";

// 1000x800
import Picture from "../public/picture.jpeg";

export default function Home() {
  return (
    <div>
      <Image src={Picture} alt="picture" layout="fixed" />
      <Image src={Picture} alt="picture" layout="intrinsic" />
      <Image src={Picture} alt="picture" layout="responsive" />
      <div className={styles.parentEl}>
        <Image src={Picture} alt="picture" layout="fill" objectFit="cover" />
      </div>
    </div>
  );
}

/* styles/Home.module.css */

.parentEl {
    position: relative;
    max-width: 700px;
    height: 300px;
}

Giải thích 1:

fixed và intrinsic: Không thay đổi kích tưởng anh cho từng viewport tương ứng.
Đối với responsive và fill thì nextjs thêm srcSet vào image để tới những viewport sẽ tương ứng download từng ảnh phù hợp kích thước.

Bạn có thể kiểm chứng bằng việc thu nhỏ màn hình từ 500px -> full viewport. Bạn nhận thấy qua từng breakpoints trình duyệt sẽ tự động tải về một image với độ phân giải phù hợp với màn hình hiện tại. Bạn có thể xem cấu hình breakpoints mặc định ở đây.

Chú ý Disable cache mới thấy được nhé: