Gatsby.js issue with frontmatter in graphql

Question

Looking for some help with this issue I have when trying to render the frontmatter for my project list. Essentially, it's not able to "detect frontmatter" nor "AllMdx", but when I query in graphql locally there is no issue. I get the information I need from the query, except I cannot grab the image.

This is the start of my .mdx file, where I define the image, I also tried other variations:

image: "../images/icon.png"

image: ../images/icon.png

image: icon.png

None seem to work.

MT.mdx start of file

---
slug: "/projects/MT"
date: "2019-09-04"
title: "MT"
image: "icon.png"
--- 

Projects.jsx

import React from "react"
import {ContentContainer} from "../components/Common/Container";
import { StaticQuery, graphql } from "gatsby";
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
// import { Button, CardActionArea, CardActions } from '@mui/material';


export default function Projects() {
    return (
        <StaticQuery
            query={graphql`
                query ProjectsQuery {
                  allMdx(filter: { fileAbsolutePath: { regex: "/projects/" } }) {
                      nodes {
                        frontmatter {
                          image
                          slug
                          title
                          date
                        }
                        excerpt
                      }
                    }
                }
        `}
        render={data => (
            <ContentContainer>
                {data.allMdx.nodes.map(({ frontmatter, excerpt }) => (
                        <Card sx={{ maxWidth: 360 }}>
                            <CardMedia
                                component="img"
                                height="180"
                                image={frontmatter.image}
                                alt="placeholder"
                            />
                            <CardContent>
                            <Typography gutterBottom variant="h4" component="div">
                                {frontmatter.title}
                                <br/>
                                {frontmatter.slug}
                                <br/>
                                {frontmatter.date}
                                <br/>
                                {excerpt}

                            </Typography>
                            </CardContent>
                    </Card>
                )
            )}

            </ContentContainer>
        )}
    ></StaticQuery>
)}

Result in localhost

Answer 1

My bet is that the path of the image is not correct.

You are passing a full_DCD.png but that path I'm not sure if it's correct (it will rely on your project structure). This assumes that there's a full_DCD.png image at localhost:8000/full_DCD.png but it looks like it should be somewhere inside /projects/MT/full_DCD.png but as I said, without knowing your project structure it's difficult to guess.

Try spotting the valid image path where the image is located (i.e: checking the /public folder or playing around with the URL to get the image).

Maybe you just simply need to concatenate the project slug, like:

{
  data.allMdx.nodes.map(({ frontmatter, excerpt }) => (
    <Card sx={{ maxWidth: 360 }}>
      <CardMedia
        component="img"
        height="180"
        image={`${frontmatter.slug}${frontmatter.image}`}
        alt="placeholder"
      />
      <CardContent>
        <Typography gutterBottom variant="h4" component="div">
          {frontmatter.title}
          <br />
          {frontmatter.slug}
          <br />
          {frontmatter.date}
          <br />
          {excerpt}
        </Typography>
      </CardContent>
    </Card>
  ));
}

Depending on your structure, you just may need to add image={`/${frontmatter.image}`}.