diff --git a/src/components/Image.js b/src/components/Image.js
index 335f03fea..2ffc9e088 100644
--- a/src/components/Image.js
+++ b/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 = ({ src, alt, width }) => {
+ return ;
+};
-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,
+ width: PropTypes.number,
+};
- return ;
+Image.defaultProps = {
+ width: 1200,
};
export default Image;
diff --git a/src/components/MDXContainer.js b/src/components/MDXContainer.js
index e081d4977..87f55ecd6 100644
--- a/src/components/MDXContainer.js
+++ b/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,
};