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 {alt}; +}; -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, };