Гэтсби - Попытка визуализации изображения с URL - Не удается прочитать свойство '0' из неопределенного

Question

Это мой код:

const Image = () => {
  const data = useStaticQuery(graphql`
    query {
    facebook {
      posts {
        data {
          full_picture
        }
      }
    }
  }
  `)

  // console.log(data.facebook.posts.data)

  const images = data.facebook.posts.data;

  const sources = images.filter(function(img) {
    if (img.full_picture == null) {
      return false;
    }
    return true
  }).map(function (img) {
    return (
      <Img src={img.full_picture} />
    )
  })

  return (
    <div>
      {sources}
    </div>
  )
}

Я получаю ошибку:

"TypeError: Cannot read property '0' of undefined"

Если я удалю HTML из return (Img), тогда он отобразит все URL-адреса на странице, но как только я добавлю тег Img, он не будет запущен.

Answer 1

Возможно, изображения не загружаются, когда вы пытаетесь отобразить его в Img, что вы можете сделать:

<Img src={img?img.full_picture:''} />

Это должно помочь.