Question: Using inline images in Gatsby markdown

about.js

import React from "react";
import "./_about.scss";
import { FormattedMessage, useIntl } from "gatsby-plugin-intl"
import AboutEN from "./about.en.mdx"
import AboutPT from "./about.pt.mdx"
import AboutES from "./about.es.mdx"

export default function Header() {
	const intl = useIntl()

	return (
		<div id="about">
			<div className="container">
				<h2 className="about-title">
					About the project
				</h2>
				<div className="about-content">
					<div className="project-description">
						{ intl.locale == 'en' &&
							<AboutEN />
						}
						{ intl.locale == 'pt' &&
							<AboutPT />
						}
						{ intl.locale == 'es' &&
							<AboutES />
						}
    {/* Continues... */}
  )
}

example.mdx

title	path
Example	/example

import Layout from "../components/layout/layout" import { Helmet } from 'react-helmet';

Title

gatsby-config.js

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

module.exports = {
	 /* Your site config here */
	 plugins: [
		 `gatsby-plugin-react-helmet`,
		 `gatsby-plugin-sass`,
		 `gatsby-plugin-sharp`,
		 `gatsby-remark-images`,
		 {
			 resolve: `gatsby-plugin-mdx`,
			 options: {
				 gatsbyRemarkPlugins: [
					{
					  resolve: `gatsby-remark-images`,
					  options: {
						maxWidth: 1200,
					  },
					},
				],
				defaultLayouts: {
					default: require.resolve("./src/components/reports/report-layout.js"),
				},
			 },
		 },
		 {
		     resolve: `gatsby-source-filesystem`,
		     options: {
			     name: `images`,
			     path: `${__dirname}/src/images`,
			 },
		 },
		 {
			 resolve: "gatsby-source-filesystem",
			 options: {
				 name: "fonts",
				 path: `${__dirname}/static/fonts/`
			 },
		 },
		 {
			resolve: `gatsby-source-filesystem`,
			options: {
			  name: `pages`,
			  path: `${__dirname}/src/pages/`,
			},
		 },
		 {
			resolve: 'gatsby-plugin-i18n',
			options: {
				langKeyDefault: 'en',
				useLangKeyLayout: false,
				prefixDefault: false,
			},
		 },
		 {
			 resolve: `gatsby-plugin-intl`,
			 options: {
				 // language JSON resource path
				 path: `${__dirname}/src/lang`,
				 // supported language
				 languages: [`en`, `pt`, `es`],
				 // language file path
				 defaultLanguage: `en`,
				 // option to redirect to `/en` when connecting `/`
				 redirect: false,
			 },
		 },
		 {
			 resolve: 'gatsby-plugin-react-svg',
			 options: {
				 rule: {
					 exclude: /\.src\.svg$/,
				 },
			 },
		 },
	 ],
 }

project-filetree.md

Thi is my project structure, for reference:

gatsby-site
|_ src
  |_ components
  |_ images
  |_ lang
  |_ pages
  |  |_ index.js
  |  |_ example.mdx
  |_ styles