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

Kyle Gill
InstructorKyle Gill
Share this video with your friends

Social Share Links

Send Tweet

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.

Instructor: [00:01] 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.

[00:21] 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.