CODEWITHSUNDEEP
reactjsgatsbycontentful
index.jsx
index.jsx

Reputation: 163

Asset images from Contentful CMS reach my Gatsby/React app, but a browser error says they are "null"

EDIT: i added the loop code.

Other variables are working fine, so the connection between Contentful and the data layer of my app is not the problem.

I can see the image asset variable including it's src in GraphiQL tool, but in my code it seems to be null. The way i understand GraphiQL, is that it queries a local data layer, so the variables are coming from Contentful just fine. This is a simplified query that i use.

GraphiQL

This CardMedia component is in a mapping function, but the JS in that cannot be the problem because everything else works just fine, except the images. browser error

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>
  )
})}

Upvotes: 0

Views: 580

Answers (1)

Sultan H.
Sultan H.

Reputation: 2938

From my understanding to your GQL app, this will be the key to your edges array, which I am supposing you are using it as posts. const posts = allContentfulBlog.edges or maybe const posts = this.props.allContentfulBlog.edges

Thus: we will be using that to loop on our objects inside the posts array.

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

if you have this already, can you please provide a code snapshot to your component where you are performing this loop.

UPDATED:

looking at the results image, there seems like one of the nodes does not have a mainImg. thus, we will use a default image link in this case.

in your render() method add this:

const defaultImage =linkToYourDefaultImage;

in your loop:

{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>
  )
})}

changes has been made to CardMedia component, in image prop, we have examined whether the value of node.mainImg if null or not, and return the proper value such like !null ? image : defaultImage

Upvotes: 1

Related Questions