The StaticImage component

StaticImage is best used when an image will always remain the same. It could be your site logo, which is the same across all pages, or a profile photo that you use at the end of blog posts, or a home page hero section, or anywhere else where the image is not required to be dynamic.

Unlike most React components, the StaticImage component has some limitations on how you can pass the props to it. It will not accept and use any of its parents' props. If you are looking for this functionality, you will want to use the GatsbyImage component.

To get an understanding of how we utilize the StaticImage component, we will implement an image on the hero of our home page:

1. Create an assets folder next to your src folder. To keep things organized, it is good practice to keep images away from your source code. We will use the assets folder to house any visual assets.
2. Create a folder within assets called images. We will use this folder to store the...