Как компоненту Image в Next JS задать свойства автоматической ширины без position:absolute?

Question

[Boris007]

Я так понял в Next изображение можно засунуть только через встроенный компонент Image
Но в нем обязательно нужно указать ширину и высоту в пикселях
А если добавить свойство layout='fill', то оно добавляет ему автоматический значение position:absolute

Как мне добавлять изображения без указания высоты и ширины в атрибутах, но при этом без абсолютного позиционирования?

Answer 1

[Алексей Уколов]

fill
fill={true} // {true} | {false}
A boolean that causes the image to fill the parent element instead of setting width and height.

https://nextjs.org/docs/app/api-reference/componen...

Если изображение не внешнее, то указывать размеры тоже не обязательно

Судя по всему, вы используете старую версию Next. Тогда от absolute не избавиться никак, просто не забудьте родителю указать relative.

Comments

[Boris007]

Некст ставил свежий месяц назад

Когда нет атрибутов ширины и высоты в Image, выдает ошибку

Error: Image with src "/images/user.jpg" is missing required "width" property.

fill={false} - так же оставляет position absolute
А значение true по умолчанию, как я понял и оно требует атрибуты ширины и высоты

Я все это пробовал

[Алексей Уколов]

Если у вас работает свойство layout, то у вас Некст меньше 13-й версии, там нет свойства fill. Поэтому вполне логично, что оно ничего не меняет в результате. А даже если бы оно и было, то явно ведь не false туда надо указывать.

[Boris007]

Алексей Уколов, "next": "13.4.7"
fill={true} - position absolute

Я перепутал, при false просит атрибуты размера указывать, а при тру позиционирование абсолютное

[Алексей Уколов]

А, ну да, в новой документации тоже написано, что добавляется absolute. Правда, там указано by default, то есть подразумевается, что как-то можно отключить, но не написано как.

[Алексей Уколов]

Указание родителю relative не решает вашу проблему?