Изображения активов из Contentful CMS попадают в мое приложение Gatsby / React, но ошибка браузера говорит, что они «нулевые»

Question

РЕДАКТИРОВАТЬ: я добавил код цикла.

Другие переменные работают нормально, поэтому связь между Contentful и уровнем данных моего приложения не проблема.

Я вижупеременная актива изображения, включая ее src в инструменте GraphiQL, но в моем коде она кажется нулевой.Насколько я понимаю, GraphiQL заключается в том, что он запрашивает локальный слой данных, поэтому переменные приходят из Contentful просто отлично.Это упрощенный запрос, который я использую.

Этот компонент CardMedia находится в функции отображения, но JS в этом не может быть проблемой, потому что всеостальное работает просто отлично, кроме картинок.

const posts = get(this, 'props.data.allContentfulBlog.edges')

{posts.map(({ node }) => {
  return (
    <Grid key={node.slug}>                
      <Card>                    
        <CardMedia
          image={node.mainImg.responsiveResolution.src}
          title={node.mainTitle}
        />                
        <CardContent>                        
          <Typography variant="headline" component="div">
            {node.mainTitle}
          </Typography>                        
          <Typography component="div">
            <p
              dangerouslySetInnerHTML={{
                __html: node.mainText.childMarkdownRemark.excerpt,
              }}
            />
          </Typography>
        </CardContent>
        <CardActions>
         <Button href={node.slug}>
           <span>Read more</span>
         </Button>
        </CardActions>            
      </Card>
    </Grid>
  )
})}

Answer 1

Насколько я понимаю, в вашем приложении GQL это будет ключом к вашему массиву ребер, который, я полагаю, вы используете как posts.const posts = allContentfulBlog.edges или, может быть, const posts = this.props.allContentfulBlog.edges

Таким образом: мы будем использовать это для зацикливания наших объектов внутри массива записей.

posts.map((post) => {
  return /* Grid */
})

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

---

ОБНОВЛЕНО:

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

в вашем методе render() добавьте это:

const defaultImage = linkToYourDefaultImage ;

в вашем цикле:

{posts.map(({ node }) => {
  return (
    <Grid key={node.slug}>                
      <Card>                    
        <CardMedia
          image={node.mainImg ? node.main.responsiveResolution.src : defaultImage}
          title={node.mainTitle}
        /> 
        ......the rest of your code.............               
    </Grid>
  )
})}

были внесены изменения в CardMedia компонент, в image prop, мы проверили, является ли значение node.mainImg нулевым или нет, и возвращаем правильное значение, такое как !null ? image : defaultImage