1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Use a local image from the static folder in a Gatsby component

    Kyle GillKyle Gill
    gatsbyGatsby

    Learn how to import static assets into components in alternative scenarios when it might be necessary, like if you couldn't use webpack.

    Assets added to the static folder won't leverage Gatsby's performance optimizations so this isn't a recommended approach, and should be used as an escape hatch.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: Images can be added to the static folder yourself in cases where you can't use Webpack to import them. With an image in the static folder, you can provide the path to the file, the source of the image tag to display it.

    Note that the file path is relative. A page that is nested in your site's hierarchy may need to move up a few directories to find the image from the static folder.