Проблема с изображением NextjS с src и URL-адресом внешнего изображения по умолчанию

Я использую последнюю версию NextJS 10.0.9. У меня есть изображение, которое я пытаюсь отобразить, но получаю сообщение об ошибке:

      Error: Image with src "https://picsum.photos/480/270" must use "width" and "height" properties or "layout='fill'" property.

Как вы можете видеть здесь, у меня установлены все эти свойства:

      <div className="card-img">
  <Image
    alt={media?.title}
    title={media?.title}
    src={media?.previewImage || 'https://picsum.photos/480/270'}
    width={480}
    height={270}
    layout="fill"
  />
</div>

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

Небольшое примечание: у меня есть ошибка Typescript на layoutсвойство, которое говорит: «Тип '« заливка »' не может быть присвоено типу '« фиксированный »|« внутренний »|« отзывчивый »| undefined'.». Я не уверен, связано ли это?

Источник

2 ответа

Решение

Если вы используете, вам не нужны атрибуты ширины и высоты. Сообщение об ошибке не совсем понятно, но это «или» является исключающим «или». Вы можете определить ширину / высоту или, но не то и другое одновременно.

Это побочный продукт того, как работает next / image : свойства width / height используются для определения соотношения сторон, не обязательно размера отображения.

Поскольку означает «растянуть до заполнения родительского элемента», ширина и высота не имеют смысла. Итак, чтобы исправить ошибку, удалите layout='fill', или удалите размеры.

Вы, наверное, уже видели это, но вот документы на всякий случай: https://nextjs.org/docs/api-reference/next/image

Источник

Для других, кто, возможно, наткнулся на эту страницу, но не совсем нашел ответ, который они ищут, я также хотел бы подчеркнуть, что свойства ширины и высоты компонента «Следующее изображение» не принимают десятичные знаки. Это довольно легко не заметить, так как сообщение об ошибке не ссылается на формат реквизита.

Источник
Другие вопросы по тегам