26

Next.js アプリがあり、縦横比に基づいて幅を自動的に決定しながら、コンテナーの高さ全体を埋める画像が必要です。

私は次のことを試しました：

<Image
    src="/deco.svg"
    alt=""
    layout="fill"
/>

このスニペットは正常にコンパイルされますが、フロントエンドで次のエラーが表示されます。

エラー: src "/deco.svg" を含む画像は、"width" および "height" プロパティまたは "unsized" プロパティを使用する必要があります。

docsによると、これらのプロパティは使用時に必要ないため、これは私を混乱させますlayout="fill"。

4

7 に答える 7

38

これは私のために働いたものです：

<div style={{width: '100%', height: '100%', position: 'relative'}}>
  <Image
    alt='Mountains'
    src='/mountains.jpg'
    layout='fill'
    objectFit='contain'
  />
</div>
于 2021-02-23T09:59:18.117 に答える