Gatsby
Up and Running with Gatsby: Images

Using the Static Folder

PRO

Learn about Gatsby's "escape hatch" for adding images and other assets.

In the last video, we learned that we can just import images into components. Sometimes you need to bypass the Gatsby build system and just bring in static assets.

Gatsby provides a static folder for just this purpose. To reference a static asset, we could just change our LodgeImage to this:

// src/pages/index.js
export default ({ data }) => (
  <Layout>
    <LodgeImage src={ 'lodge2.jpg' } alt="Lodge" />
    <p>Welcome to {data.site.siteMetadata.title}!</p>
  </Layout>
)

This is sort of a brute force approach to using assets, so you won't use it often, but it's useful to know about.

There is a better way, though, and even a better way than importing images, and that's what we'll start to learn in the next video.