как показать мультимедийный контент с помощью gatsby - PullRequest
Новая
       23

как показать мультимедийный контент с помощью gatsby

1 голос
/ 11 января 2020

Прохождение Эндрю Мида по обучению гэтсби . Моя содержательная модель настроена с медиа-полем для изображения героя. Форматированный текст и текстовые поля работают нормально. На моей главной странице я хочу, чтобы каждое сообщение отображалось с миниатюрой изображения героя. Мой запрос к GraphQL выглядит следующим образом, и вы можете видеть heroImage , который прекрасно работает на игровой площадке graphql: 

  const data = useStaticQuery(graphql`
    query {
      allContentfulWork(sort: { fields: publishedDate, order: DESC }) {
        edges {
          node {
            title
            slug
            publishedDate(formatString: "MMMM Do, YYYY")
            heroImage {
              file {
                url
              }
            }
          }
        }
      }
    }
  `)

^^ Это работает на игровой площадке GraphQL. И ниже в индексе. js Я возвращаюсь: 

return (
    <Layout>
      <ul className={workStyles.indexPage}>
        {data.allContentfulWork.edges.map(edge => {
          return (
            <li>
              <Link to={`/work/${edge.node.slug}`}>
                <h3>{edge.node.title}</h3>
                {edge.node.publishedDate}
                <img src={edge.node.heroImage.file.url} />
              </Link>
            </li>
          )
        })}
      </ul>
    </Layout>
  )

проблема заключается в том, что {edge.node.heroImage.file.url} возвращает ошибку, TypeError: Cannot read property 'file' of null.

как мне вставить это изображение?

1 Ответ

0 голосов
/ 21 января 2020

Я думаю, что это приводило к ошибке, потому что не все содержательные сообщения имели heroImage. Я добавил троичную, чтобы посмотреть, существует ли {edge.node.heroImage.file.url}, но это тоже вызвало ошибку, я думаю, потому что edge.node.heroImage не существует для некоторых сообщений. Итак, вот что сработало: 

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