如何设置Next.js Image组件保持原始图片宽高以适配瀑布流布局？

完全可以实现，根据你使用的Next.js版本不同，可选以下对应方案：

适用Next.js 13+（App Router默认新版Image组件） #

新版Image组件原生支持模拟原生img的自适应行为，不需要提前获取图片宽高，直接按以下写法即可实现宽度100%撑满列、高度按原始宽高比自适应撑开父容器的效果：

import Image from 'next/image'

// 组件内渲染代码
<Image
  src={src}
  alt={description}
  width={0}
  height={0}
  sizes="100vw"
  // 用style或者自定义className控制样式都可以，效果和原生img完全一致
  style={{ width: '100%', height: 'auto' }}
  // 你需要的其他配置
  loading="lazy"
  placeholder="blur"
  blurDataURL="你的模糊占位图base64字符串"
/>

这里传width、height为0是为了绕过组件的必填参数校验，实际渲染尺寸由CSS控制，完全符合你的瀑布流布局需求。

适用Next.js 12及更早版本（含next/legacy/image） #

方案1：服务端预获取图片宽高（最优方案） #

在服务端数据获取阶段（getStaticProps/getServerSideProps），用image-size等工具批量获取所有待渲染图片的原始宽高，将宽高随图片地址一同返回给前端，搭配layout="responsive"即可实现自适应：

import Image from 'next/image'

<Image
  src={src}
  alt={description}
  // 下方imgWidth、imgHeight为服务端返回的图片原始宽高值
  width={imgWidth}
  height={imgHeight}
  layout="responsive"
  loading="lazy"
  placeholder="blur"
  blurDataURL="你的模糊占位图base64字符串"
/>

该方案可以避免前端布局偏移，加载体验最好。

方案2：前端动态计算宽高比 #

如果无法在服务端提前获取图片宽高，可以在前端预加载图片获取宽高比后再渲染组件：

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

const MasonryImg = ({ src, alt, blurDataURL }) => {
  const [aspectRatio, setAspectRatio] = useState(null)

  useEffect(() => {
    const tempImg = new window.Image()
    tempImg.src = src
    tempImg.onload = () => {
      setAspectRatio(tempImg.width / tempImg.height)
    }
  }, [src])

  // 可自定义占位样式，和最终渲染的图片区域尺寸保持一致即可
  if (!aspectRatio) return <div className="img-loading-placeholder" />

  return (
    <div style={{ position: 'relative', width: '100%', aspectRatio }}>
      <Image
        src={src}
        alt={alt}
        layout="fill"
        objectFit="contain"
        loading="lazy"
        placeholder="blur"
        blurDataURL={blurDataURL}
      />
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Velidan