Up and Running with Gatsby: Images

This tutorial is all about images! You'll learn how to import images, how to use the static folder, and the magic of gatsby-image. You'll also learn how to use images in Markdown, both in frontmatter and inlined in the content.

You can find the finished sample code for this tutorial in sample-code/marionberry-farm-lodge. The assignments are in the readme in the assignments folder. You'll use the starting point marionberry-farm-lodge-start project in the assignments folder to complete the exercises.

Helpful Links

• Gatsby Docs: Importing Assets into Files
• Gatsby Docs: Using Gatsby Image
• Gatsby Docs: Working with Images in Markdown
• gatsby-remark-images
• gatsby-image
• gatsby-plugin-sharp
• gatsby-transformer-sharp
• Sharp image processing library

Image Credits

All images are from Unsplash).

• Blacksmith: Nicolas Hoizey
• Forest: Sebastian Unrau
• Lodge: Roberto Nickson
• Lodge 2: Jamie Street
• Man sawing: Blaz Erzetic