Как сделать фотографии из Contentful в Гэтсби - PullRequest
Новая
       22

Как сделать фотографии из Contentful в Гэтсби

0 голосов
/ 11 июля 2019

У меня есть модель с полным содержимым, которая называется Работа, которая включает в себя много данных, и одним из полей является «Миниатюра». Мне удалось успешно отобразить все данные, кроме миниатюры.

запрос: 

{
    allContentfulWork(sort: { fields: publishDate, order: DESC }) {
      edges {
        node {
          thumbnail {
            file {
              url
            }
          }
          title
          slug
          fromDate(formatString: "MMMM Do, YYYY")
          toDate(formatString: "MMMM Do, YYYY")
          publishDate
          gallery {
          file {
            url
          }
        }
      }
    }
  }
}

мой jsx: 

<img src={edge.node.thumbnail.file.url} alt={edge.node.title} />

ошибка, которую я получаю: Ошибка типа: не удается прочитать свойство 'file' с нулевым значением

Я хотел бы знатькак сделать это, а также как использовать изображения Гэтсби вместе с ним.

1 Ответ

0 голосов
/ 17 июля 2019

В одной из ваших «рабочих» записей внутри Contentful отсутствует миниатюра. Либо вы не добавили его, либо запись не была опубликована, либо ресурс был удален.

Как правило, ваш код должен обрабатывать этот случай, потому что ваши редакторы контента иногда удаляют ссылки, даже если Contentful предупреждает их об этом. Вы должны изменить свой JSX следующим образом: 

{edge.node.thumbnail && <img src={edge.node.thumbnail.file.url} alt={edge.node.title} />}

Рендеринг тега img возможен только при наличии эскиза.

...