Use featureimage in gatsby

user_147946 0
Viewed 258

I want to display featuredImages within my blog-posts.

My frontmatter looks like this:

---
title: My pst with a feature image
date: "2021-05-16T09:45:00.000Z"
description: "Some cool post with a feature image"
tags: [demo]
featuredImage: "feature.png"
---

The index.md and the feature.png are siblings in the same directory. I'm using this query:

query BlogPostBySlugDev($id: String!) {
  markdownRemark(id: {eq: $id}) {
    id
    frontmatter {
      title
      date(formatString: "D. MMMM YYYY", locale: "de-DE")
      dateIso: date(formatString: "YYYY-MM-DD", locale: "en-US")
      description
      tags
      featuredImage {
        childImageSharp {
          gatsbyImageData(width: 400)
        }
      }
    }
  }
}

and I'm getting this result in the GraphiQL:

{
  "data": {
    "markdownRemark": {
      "id": "f73a3644-493c-5cc4-8a5d-f749db898954",
      "frontmatter": {
        "title": "My pst with a feature image",
        "date": "16. Mai 2021",
        "dateIso": "2021-05-16",
        "description": "Some cool post with a feature image",
        "tags": [
          "demo"
        ],
        "featuredImage": {
          "childImageSharp": null
        }
      }
    }
  },
  "extensions": {}
}

This is not what I expected. I would have expected to get my image-data here ... likewise I'm getting this message on the console (running gatsby in development mode):

warn You can't use childImageSharp together with undefined.undefined — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined

I'm using these packages:

    "gatsby": "^3.1.1",
    "gatsby-plugin-feed": "^3.1.0",
    "gatsby-plugin-gatsby-cloud": "^2.1.0",
    "gatsby-plugin-google-analytics": "^3.1.0",
    "gatsby-plugin-image": "^1.1.1",
    "gatsby-plugin-manifest": "^3.1.0",
    "gatsby-plugin-offline": "^4.1.0",
    "gatsby-plugin-pnpm": "^1.2.5",
    "gatsby-plugin-react-helmet": "^4.1.0",
    "gatsby-plugin-sharp": "^3.1.1",
    "gatsby-plugin-typescript": "^3.1.0",
    "gatsby-remark-copy-linked-files": "^3.1.0",
    "gatsby-remark-images": "^4.1.0",
    "gatsby-remark-prismjs": "^4.1.0",
    "gatsby-remark-responsive-iframe": "^3.1.0",
    "gatsby-remark-smartypants": "^3.1.0",
    "gatsby-source-filesystem": "^3.1.0",
    "gatsby-transformer-remark": "^3.1.0",
    "gatsby-transformer-sharp": "^3.1.0",

I also extended the Frontmatter type in my gatsby-node.js, so that featureImage would be recognized as a file:

    type Frontmatter {
      title: String
      description: String
      date: Date @dateformat
      tags: [String!]
      featuredImage: File
    }

And finally I setup the gatsby-source-filesystem plugin to resolve two paths (as I have posts and pages):

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    }

What might I be missing?

gatsby
1 Answers

You said:

The index.md and the feature.png are siblings in the same directory.

But your gatsby-source-filesystem shows two different folders:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/content/blog`,
    name: `blog`,
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images`,
  },
}

It seems that Gatsby is not able to create the proper nodes for your image because it's not able to find it in your filesystem.

I would suggest following your gatsby-source-filesystem approach, so, one folder for the posts (markdowns) and one folder for the images. Both folders can be siblings of course but then, your markdown structure should look like:

---
title: My pst with a feature image
date: "2021-05-16T09:45:00.000Z"
description: "Some cool post with a feature image"
tags: [demo]
featuredImage: "../feature.png"
---
user_55853710
Related