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

Question

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

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将是一个包含, , （以及可选的）的对象。因此，如果您想访问它们，您可以执行诸如等等之类的操作。srcheightwidthblurDataURLfoo.height

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

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

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

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

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

只是澄清一下 - 在 SO、GitHub 等较旧的线程上，您可能会看到一个unsizedprop 被传递给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
• 在node.js中获取图像的宽度和高度
• Next.js 使用 <img> 标签构建失败
• 如何在 Next.js 中使用未知宽度和高度的图像组件
• https://web.dev/cls
• https://web.dev/time-to-first-byte

第二个 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 };