تصاویر محلی

  ┌─────────────────────┐
  │      Project        │
  ├──────────┬──────────┤
  │   app/   │  public/ │
  │  page.tsx│ profile. │
  │          │   png    │
  └──────────┴──────────┘
  ساختار پوشه‌ها با پوشه‌های app و public

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      alt="تصویر نویسنده"
      width={500}
      height={500}
    />
  )
}

import Image from 'next/image'
import ProfileImage from './profile.png'

export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="تصویر نویسنده"
      // width={500} به صورت خودکار فراهم می‌شود
      // height={500} به صورت خودکار فراهم می‌شود
      // blurDataURL="data:..." به صورت خودکار فراهم می‌شود
      // placeholder="blur" // blur-up اختیاری در حین بارگذاری
    />
  )
}

import Image from 'next/image'

async function PostImage({
  imageFilename,
  alt,
}: {
  imageFilename: string
  alt: string
}) {
  const { default: image } = await import(
    `../content/blog/images/${imageFilename}`
  )
  // image شامل width، height و blurDataURL است
  return <Image src={image} alt={alt} />
}

اگر path alias پیکربندی شده باشد (مثلاً @/)، می‌توانید به جای مسیر نسبی از آن استفاده کنید:

const { default: image } = await import(
  `@/content/blog/images/${imageFilename}`
)

مسیر باید یک پیشوند استاتیک (مانند ../content/blog/images/) داشته باشد. تا حد امکان دقیق باشید، زیرا تمام فایل‌های مطابق با آن پیشوند بسته‌بندی (bundle) می‌شوند. فقط فایل‌های داخل پوشه مشخص شده شامل می‌شوند، بنابراین ورودی‌های خارجی نمی‌توانند فراتر از آن دسترسی پیدا کنند.