Next.js 中文网

主题

图片 ​

¥Images

Next.js <Image> 组件扩展了 HTML <img> 元素以提供：

¥The Next.js <Image> component extends the HTML <img> element to provide:

  • 尺寸优化：使用 WebP 等现代图片格式，自动为每个设备提供正确大小的图片。

    ¥Size optimization: Automatically serving correctly sized images for each device, using modern image formats like WebP.

  • 视觉稳定性：在加载图片时自动阻止 布局转变。

    ¥Visual stability: Preventing layout shift automatically when images are loading.

  • 更快的页面加载速度：仅在图片进入视口时使用原生浏览器延迟加载加载图片，并使用可选的模糊占位符。

    ¥Faster page loads: Only loading images when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.

  • 资源灵活性：按需调整图片大小，即使是存储在远程服务器上的图片。

    ¥Asset flexibility: Resizing images on-demand, even images stored on remote servers.

要开始使用 <Image>，请从 next/image 导入它并在组件中渲染它。

¥To start using <Image>, import it from next/image and render it within your component.

tsx
import Image from 'next/image'

export default function Page() {
  return <img src="https://nextjs.org/_next/image?url=https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/docs/light/public-folder.png&w=3840&q=75"/>

```tsx filename="app/page.tsx" switcher
import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

使用本地图片时，Next.js 将根据导入的文件自动确定图片的固有 width 和 height。这些值用于确定图片比例并在图片加载时防止 累积布局偏移。

¥When using local images, Next.js will automatically determine the intrinsic width and height of your image based on the imported file. These values are used to determine the image ratio and prevent Cumulative Layout Shift while your image is loading.

远程图片 ​

¥Remote images

要使用远程图片，你可以为 src 属性提供 URL 字符串。

¥To use a remote image, you can provide a URL string for the src property.

tsx
import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

由于 Next.js 在构建过程中无法访问远程文件，因此你需要手动提供 width、height 和可选的 blurDataURL 属性。width 和 height 用于推断图片的正确宽高比，并避免图片加载时布局偏移。

¥Since Next.js does not have access to remote files during the build process, you'll need to provide the width, height and optional blurDataURL props manually. The width and height are used to infer the correct aspect ratio of image and avoid layout shift from the image loading in.

要安全地允许来自远程服务器的图片，你需要在 next.config.js 中定义支持的 URL 模式列表。尽可能具体，以防止恶意使用。例如，以下配置将仅允许来自特定 AWS S3 存储桶的图片：

¥To safely allow images from remote servers, you need to define a list of supported URL patterns in next.config.js. Be as specific as possible to prevent malicious usage. For example, the following configuration will only allow images from a specific AWS S3 bucket:

ts
import type { NextConfig } from 'next'

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

export default config