import Image from 'next/image'
import profilePic from './profile.jpg'

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="个人头像"
      // 自动推断宽高
      placeholder="blur" // 模糊占位
    />
  )
}

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://example.com/photo.jpg"
      alt="远程图片"
      width={800}
      height={600}
    />
  )
}

import type { NextConfig } from 'next'

const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/images/**',
      },
      {
        protocol: 'https',
        hostname: '**.cloudinary.com',
      },
    ],
  },
}

export default config

import { getPlaiceholder } from 'plaiceholder'

export async function getBlurDataURL(src: string) {
  const buffer = await fetch(src).then((res) => res.arrayBuffer())
  const { base64 } = await getPlaiceholder(Buffer.from(buffer))
  return base64
}

import Image from 'next/image'
import { getBlurDataURL } from '@/lib/image'

export default async function PhotosPage() {
  const photos = [
    { url: 'https://example.com/photo1.jpg', alt: '照片1' },
    { url: 'https://example.com/photo2.jpg', alt: '照片2' },
  ]

  const photosWithBlur = await Promise.all(
    photos.map(async (photo) => ({
      ...photo,
      blurDataURL: await getBlurDataURL(photo.url),
    }))
  )

  return (
    <div className="grid grid-cols-2 gap-4">
      {photosWithBlur.map((photo) => (
        <div key={photo.url} className="relative aspect-video">
          <Image
            src={photo.url}
            alt={photo.alt}
            fill
            placeholder="blur"
            blurDataURL={photo.blurDataURL}
          />
        </div>
      ))}
    </div>
  )
}

const config: NextConfig = {
  images: {
    quality: 80, // 全局默认质量
  },
}

const config: NextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'],
    // 按顺序尝试，回退到原格式
  },
}

import Image from 'next/image'

interface AvatarProps {
  src: string
  alt: string
  size?: 'sm' | 'md' | 'lg'
}

const sizes = {
  sm: 32,
  md: 48,
  lg: 64,
}

export function Avatar({ src, alt, size = 'md' }: AvatarProps) {
  const dimension = sizes[size]

  return (
    <Image
      src={src}
      alt={alt}
      width={dimension}
      height={dimension}
      className="rounded-full object-cover"
    />
  )
}

'use client'

import Image from 'next/image'
import { useState } from 'react'

interface GalleryProps {
  images: { src: string; alt: string }[]
}

export function Gallery({ images }: GalleryProps) {
  const [selectedIndex, setSelectedIndex] = useState(0)

  return (
    <div className="space-y-4">
      {/* 主图 */}
      <div className="relative aspect-video">
        <Image
          src={images[selectedIndex].src}
          alt={images[selectedIndex].alt}
          fill
          className="object-contain"
          priority
        />
      </div>

      {/* 缩略图 */}
      <div className="grid grid-cols-5 gap-2">
        {images.map((image, index) => (
          <button
            key={image.src}
            onClick={() => setSelectedIndex(index)}
            className={`relative aspect-square ${
              index === selectedIndex ? 'ring-2 ring-blue-600' : ''
            }`}
          >
            <Image
              src={image.src}
              alt={image.alt}
              fill
              className="object-cover"
              sizes="20vw"
            />
          </button>
        ))}
      </div>
    </div>
  )
}

import Image from 'next/image'

export function Hero() {
  return (
    <section className="relative h-screen">
      <Image
        src="/hero-bg.jpg"
        alt=""
        fill
        className="object-cover"
        priority
        quality={85}
      />
      <div className="absolute inset-0 bg-black/50" />
      <div className="relative z-10 flex items-center justify-center h-full">
        <h1 className="text-5xl font-bold text-white">欢迎</h1>
      </div>
    </section>
  )
}

import Image from 'next/image'
import Link from 'next/link'

interface ProductCardProps {
  id: string
  name: string
  price: number
  image: string
}

export function ProductCard({ id, name, price, image }: ProductCardProps) {
  return (
    <Link href={`/products/${id}`} className="group">
      <div className="relative aspect-square overflow-hidden rounded-lg bg-gray-100">
        <Image
          src={image}
          alt={name}
          fill
          className="object-cover transition-transform group-hover:scale-105"
          sizes="(max-width: 768px) 50vw, (max-width: 1200px) 33vw, 25vw"
        />
      </div>
      <h3 className="mt-2 font-medium">{name}</h3>
      <p className="text-gray-600">¥{price}</p>
    </Link>
  )
}

const config: NextConfig = {
  images: {
    // 设备尺寸断点
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],

    // 图片尺寸断点
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],

    // 格式优先级
    formats: ['image/avif', 'image/webp'],

    // 最小缓存时间（秒）
    minimumCacheTTL: 60 * 60 * 24 * 30, // 30 天

    // 禁用静态导入
    disableStaticImages: false,

    // 自定义 loader
    loader: 'default',
  },
}

export default function cloudinaryLoader({
  src,
  width,
  quality,
}: {
  src: string
  width: number
  quality?: number
}) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(',')}${src}`
}

const config: NextConfig = {
  images: {
    loader: 'custom',
    loaderFile: './lib/cloudinary-loader.ts',
  },
}

export default function imgixLoader({
  src,
  width,
  quality,
}: {
  src: string
  width: number
  quality?: number
}) {
  const url = new URL(`https://example.imgix.net${src}`)
  url.searchParams.set('auto', 'format')
  url.searchParams.set('fit', 'max')
  url.searchParams.set('w', width.toString())
  if (quality) {
    url.searchParams.set('q', quality.toString())
  }
  return url.href
}