feat: plugin solution for image height

gatsby-config.js

@@ -54,6 +54,8 @@ module.exports = {
             resolve: 'gatsby-remark-images',
             options: {
               maxWidth: 1200,
+              maxHeight: 400,
+              fit: 'inside',
               linkImagesToOriginal: false,
             },
           },

src/components/Image.js

@@ -1,20 +1,32 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { useStaticQuery, graphql } from 'gatsby';
+import Img from 'gatsby-image';
 
-const Image = ({ alt, ...props }) => {
-  return <img alt={alt} {...props} />;
-};
+/*
+ * 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/
+ */
 
-Image.propTypes = {
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-  width: PropTypes.number,
-  height: PropTypes.number,
-};
+const Image = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
+        childImageSharp {
+          fluid(maxWidth: 300) {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+    }
+  `);
 
-Image.defaultProps = {
-  height: 400,
-  width: 'auto',
+  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
 };
 
 export default Image;

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:
 
-  <Image src="../../images/create-hello-world/hello-world-launcher.png" alt="The customized nerdlet launcher" />
+  ![The customized nerdlet launcher](../../images/create-hello-world/hello-world-launcher.png)
 
 
   After you click the new launcher, your "Hello, World!" appears: