Nextjs图像没有使用高度值

Question

我是NextJS的新手，正在使用它的Image标签在我的应用程序中有一个图像。但是图像大小只有在我改变它的宽度值时才会改变，改变高度的值根本不会影响它。图片如下:

<Image src="/Logo.png" alt="Logo" height={10} width={100} />

这里的图像取宽度的值，出来的是大的。如果我替换高度和宽度的值，那么它也会取宽度的值并变小。我甚至试图把高度属性后的宽度，但没有改变。我哪里做错了?

Answer 1

您可以将Image组件包装在div中，并设置如下样式:

<div style={{ position: "relative", width: `${100}px`, height: `${10}px` }}>
<Image
src="/Logo.png"
alt="Logo"
fill
style={{ objectFit: "contain" }}
/>
</div>

注意:

• 包装器div有一个相对位置，因为fill图像是绝对定位在DOM
• fill是一个道具在接下来的13(旧版本使用layout="fill")
• objectFit在样式对象内部传递(可选的objectPosition)，这些属性将被添加到渲染的span元素样式属性

Answer 2

用你想要的高度和宽度来换行标签

添加布局="fill"在标签

<div style={{width: '100px', height: '100px'}}>
<Image
src="/Logo.png"
alt="Logo"
layout='fill'
objectFit='contain'
/>
</div>