Use a local image from the static folder in a Gatsby component
InstructorKyle Gill
Published 5 years ago
Updated 3 years ago
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.
egghead
~ 31 minutes ago
Markdown supported.
Become a member to join the discussionEnroll Today
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!