تصاویر ریموت

برای استفاده از تصویر راه‌دور، می‌توانید یک رشته URL برای ویژگی src فراهم کنید.

import Image from 'next/image'

export default function Page() {
  return (
    <image alt="تصویر نویسنده" height="{500}" src="https://s3.amazonaws.com/my-bucket/profile.png" width="{500}"/>
  )
}

از آنجا که Next.js در فرآیند build به فایل‌های راه‌دور دسترسی ندارد، باید مقادیر width، height و اختیاری blurDataURL را به صورت دستی فراهم کنید. width و height برای استنتاج نسبت ابعاد صحیح تصویر و جلوگیری از layout shift هنگام بارگذاری استفاده می‌شوند. همچنین می‌توانید از ویژگی fill استفاده کنید تا تصویر اندازه عنصر والد را پر کند.

برای اجازه امن بارگذاری تصاویر از سرورهای راه‌دور، باید الگوهای URL مجاز را در next.config.js تعریف کنید. تا حد امکان دقیق باشید تا از سوءاستفاده مخرب جلوگیری شود. برای مثال، پیکربندی زیر فقط تصاویری از یک باکت AWS S3 خاص را مجاز می‌دارد:

import type { NextConfig } from 'next'

const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}

export default config