OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to set the next/image component to 100% height

  • Thread starter Thread starter Jake
  • Start date Start date
J

Jake

Guest
I have a Next.js app, and I need an image that fills the full height of its container while automatically deciding its width based on its aspect ratio.

I have tried the following:

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

This snippet compiles successfully, but on the frontend, I see the following error:

Error: Image with src "/deco.svg" must use "width" and "height" properties or "unsized" property.

This confuses me because according to the docs, these properties are not required when using layout="fill".

<p>I have a Next.js app, and I need an image that fills the full height of its container while automatically deciding its width based on its aspect ratio.</p>
<p>I have tried the following:</p>
<pre class="lang-js prettyprint-override"><code><Image
src="/deco.svg"
alt=""
layout="fill"
/>
</code></pre>
<p>This snippet compiles successfully, but on the frontend, I see the following error:</p>
<blockquote>
<p>Error: Image with src "/deco.svg" must use "width" and "height" properties or "unsized" property.</p>
</blockquote>
<p>This confuses me because according to <a href="https://nextjs.org/docs/api-reference/next/image" rel="noreferrer">the docs</a>, these properties are <em>not</em> required when using <code>layout="fill"</code>.</p>
 

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top