Gatsby.js issue with frontmatter in graphql - reactjs

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}`}.