如何在 Next.js 中获取图像的高度和宽度属性？

Question

我只是想知道如何让图片在 Next.js 中使用 <Image> 组件来获取自己的高度和宽度，而不是自己定义高度和宽度？

Answer 1

从Next.js v11开始，你可以这样做：

import Image from 'next/image';
import foo from 'path/to/foo.png';

// ...

<Image src={foo} alt="" /> // <-- no need to pass height/width

在上面的示例中，foo 将是一个包含src、height、width（以及可选的blurDataURL）的object。所以，如果你想访问它们，你可以做foo.height之类的东西。

---

此外，还有一些您可能感兴趣的hacks：

1. 使用layout="fill" 并将处理程序传递给onLoadingComplete，您将在其中获得naturalWidth 和naturalHeight。然后您可以设置状态以相应地调整容器。但不推荐这种方法，因为它可能会增加 CLS。

2. 在数据获取方法 [getStaticProps (static generation) / getServerSideProps (SSR)] 中，读取您的图像文件并将其尺寸作为道具传递给您的组件。 SSR 可能会导致服务器资源开销，但可以通过缓存显着减少。

3. 只需使用旧的 img 标签。再次不推荐，但如果您的文件已经优化，则可以使用。 ESLint 可能会根据您的配置发出一些警告，您需要禁用这些规则。

---

PS：只需检查一次您的用例是否可以由 layout="fill" 处理（不更新状态）。

只是澄清一下 - 在 SO、GitHub 等上的旧线程上，您可能会看到 unsized 属性被传递给 next/image。它在 Next.js v10 中被弃用，并在 v11 中被删除。所以，它可能不适合你。

---

参考资料：

• https://nextjs.org/docs/api-reference/next/image
• https://nextjs.org/docs/basic-features/data-fetching
• https://nextjs.org/docs/going-to-production
• Get the width and height of an image in node.js
• Next.js build fails using <img> tag
• How to use Image component in Next.js with unknown width and height
• https://web.dev/cls
• https://web.dev/time-to-first-byte

---

A sample implementation of the second hack:

import fs from "fs";
import path from "path";

import Image from "next/image";
import probe from "probe-image-size";

const IndexPage = ({ mountains }) => (
  <Image
    src="/mountains.jpg"
    height={mountains.height}
    width={mountains.width}
    alt="Mountains"
  />
);

const getStaticProps = async () => {
  const mountains = await probe(
    fs.createReadStream(path.join(process.cwd(), "public/mountains.jpg"))
  );
  return { props: { mountains } };
};

export default IndexPage;
export { getStaticProps };