如何在 Next.js 中使用未知宽度和高度的图像组件答案

【问题标题】：How to use Image component in Next.js with unknown width and height如何在 Next.js 中使用未知宽度和高度的图像组件
【发布时间】：2021-05-26 22:12:10
【问题描述】：

从版本 10 开始，Next.js 带有内置的Image 组件，该组件提供图像优化和响应式调整图像大小的功能。我非常喜欢它，并且我一直在我的网站上使用它来获取固定大小的图像。根据官方文档，除非是layout=fill，否则宽度和高度都是必需的。

现在，即使我事先不知道宽度和高度，我也想使用Image 组件。我有来自 CMS 的博客资源，其中图像的确切大小未知。在这种情况下，有什么办法可以使用Image 组件吗？

任何帮助将不胜感激。

【问题讨论】：

标签： image next.js nextjs-image

【解决方案1】：

是的，您可以将它与您提到的 layout=fill 选项一起使用。

在这种情况下，您需要为图像设置“纵横比”

<div style={{ position: "relative", width: "100%", paddingBottom: "20%" }} >
  <Image
    alt="Image Alt"
    src="/image.jpg"
    layout="fill"
    objectFit="contain" // Scale your image down to fit into the container
  />
</div>

您也可以使用objectFit="cover"，它会放大您的图像以填满所有容器。

这种方法的缺点是会附加到您指定的width，它可以是相对的，例如“100%”或绝对的，例如“10rem”，但无法根据图像大小设置自动宽度和高度，或者至少现在还没有。

【讨论】：

我不想提前设置宽高比，可能会扭曲图像。哦，好吧，我想我现在必须坚持使用img。谢谢你的回答。

【解决方案2】：

如果你想保留原始图像的比例，你可以这样做：

<div
  style={{
    width: 150,
    height: 75,
    position: "relative",
  }}>
<Image
  src={"/images/logos/" + merger.companyLogoUrl}
  alt={merger.company}
  layout="fill"
  objectFit="contain"
/>

图像将填充到容器允许的大小。因此，例如，如果您知道图像的宽度大于长度，则可以只设置容器的宽度，然后将容器的高度设置为大于预测的图像高度。

因此，例如，如果您使用的是宽图像，您可以将容器宽度设置为 150 像素，那么只要容器高度大于图像高度，图像就会以原始高度显示比例。

【讨论】：

【解决方案3】：

我也遇到了同样的问题：我想在 MUI 的 ImageList 的砌体中使用 next/image 中的 Image...

无论如何，这是我用来获取图像大小并处理容器大小的技巧：

    import React, { FC, useState } from 'react';
    import styled from 'styled-components';
    import Image from 'next/image';
    
    interface Props {
      src: string;
    }
    export const MasonryItem: FC<Props> = ({ src }) => {
      const [paddingTop, setPaddingTop] = useState('0');
    
      return (
        <Container style={{ paddingTop }}>
          <Image
            src={src}
            layout="fill"
            objectFit="contain"
            onLoad={({ target }) => {
              const { naturalWidth, naturalHeight } = target as HTMLImageElement;
              setPaddingTop(`calc(100% / (${naturalWidth} / ${naturalHeight})`);
            }}
          />
        </Container>
      );
    };
    
    const Container = styled.div`
      position: relative;
    `;

想法：在加载时获取图像的大小，计算比例并使用它使容器用 padding-top 填充所需的空间。这样，无论您的图像大小如何，容器都适合它。

备注，我没有在容器上使用宽度或高度，因为我的项目不需要它，但也许您必须为您的项目设置两者之一。

由于我仍然从 React & NextJS & typescript 开始，也许解决方案可以更漂亮，如果有人有改进它的想法，我会很高兴阅读它！ ?

【讨论】：

【解决方案4】：

<Image src={thumbnail || ""}
       alt="post-thumbnail"
       layout="responsive"
       objectFit="cover"
       width={6}
       height={4}
/>

width={6} height={4} 是比例
例如：正方形 => 宽度={1} 高度={1}

【讨论】：