Using the Static Folder

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.