Image component for markdown components

src/components/Image.js

@@ -1,32 +1,18 @@
 import React from 'react';
-import { useStaticQuery, graphql } from 'gatsby';
-import Img from 'gatsby-image';
+import PropTypes from 'prop-types';
 
-/*
- * This component is built using `gatsby-image` to automatically serve optimized
- * images with lazy loading and reduced file sizes. The image is loaded using a
- * `useStaticQuery`, which allows us to load the image from directly within this
- * component, rather than having to pass the image data down from pages.
- *
- * For more information, see the docs:
- * - `gatsby-image`: https://gatsby.dev/gatsby-image
- * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
- */
+const Image = ({ alt, ...props }) => {
+  return <img alt={alt} {...props} />;
+};
 
-const Image = () => {
-  const data = useStaticQuery(graphql`
-    query {
-      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
-        childImageSharp {
-          fluid(maxWidth: 300) {
-            ...GatsbyImageSharpFluid
-          }
-        }
-      }
-    }
-  `);
+Image.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+  width: PropTypes.number,
+};
 
-  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
+Image.defaultProps = {
+  width: 1200,
 };
 
 export default Image;

src/components/MDXContainer.js

@@ -12,6 +12,7 @@ import Important from './Important';
 import Tip from './Tip';
 import Intro from './Intro';
 import MDXCodeBlock from './MDXCodeBlock';
+import Image from './Image';
 
 import styles from './MDXContainer.module.scss';
 
@@ -23,6 +24,7 @@ const components = {
   Important,
   Tip,
   Intro,
+  Image,
   code: MDXCodeBlock,
   pre: (props) => props.children,
 };

src/markdown-pages/build-apps/build-hello-world-app.mdx

@@ -121,7 +121,7 @@ If you followed all the steps in the CLI wizard, you now have files under a new
 
   When the browser opens, click the new launcher for your application. Here's an example where we inserted a leaf icon:
 
-  ![The customized nerdlet launcher](../../images/create-hello-world/hello-world-launcher.png)
+  <Image src="../../images/create-hello-world/hello-world-launcher.png" alt="The customized nerdlet launcher" />
 
 
   After you click the new launcher, your "Hello, World!" appears: