logo

Samiti.dev

การเรียก Next Image สำหรับ static page

เกริ่น

สาเหตุ กรณีที่มีการเรียกใช้ component Image ของ NextJS ไม่สามารถเรียกผ่าน Server ได้ ทำให้รูปภาพไม่แสดง

โดยเฉพาะ static page ถ้าเป็น server บน NextJS ไม่ค่อยมีปัญหา ดังนั้นเพื่อปลดล็อค มาพิจารณาทีละขั้น

แก้ที่ไฟล์ next.config.js

ตั้งค่าเป็น unoptimized: เป็น true

  images: {
    unoptimized: true 
  },

Type ของ Image Loader

หากเราใช้ Image component คู่กับ ImageLoader และทำตามคู่มือในหน้าเว็บไซต์หลัก จะเกิดการหา Type ไม่เจอสำหรับคนใช้ TypeScript

คู่กับ Next.js

ทริปคือเอาเม้าส์วางเหนือฟังชั่น และจะแสดง Type ที่ต้องวาง

สำหรับกรณี Image Loader

    import Image, { type ImageLoaderProps } from 'next/image'
 
    const imageLoader = ({ src, width, quality }: ImageLoaderProps ) => {
    return `https://samiti.dev/${src}?w=${width}&q=${quality || 75}`
    }
 
    <Image
      loader={imageLoader}
      src="image.png"
      alt="Picture of the author"
      width={500}
      height={363}
    />

เพียงเท่านี้ก็สามารถเรียกใช้งาน NextJS Image คู่กับ Image Loader โดยที่ไม่พบ Error แล้ว