Search code examples
reactjsgatsbygif

Can't import gif into Gatsbyjs

I have a simple site structure using Gatsby.

Structure

In my index.js page, which is my homepage, I have the following code.

<Layout>
  <div className="heroContainer" onMouseEnter={console.log('enter')}>
    <div className="greetingContainer">
      <h1>Hi</h1>
    </div>
    <div className="selfieContainer">
      <StaticImage className="selfie" src="../images/{path}_Selfie.png" alt="selfie" ></StaticImage>
    </div>
    <div className="shortDescriptionContainer">
      <img src={theAnyKey} alt="is it working" />
    </div>
  </div>
  <div className="postContainer">
    <div className="postContainerHeadings">
      <p>Latest</p>
    </div>
    <div className="postListing">
      {Posts}       
    </div>
  </div>
</Layout>

I'm importing the any key gif but I just keep seeing the alt text.

Broken gif

I'm following this official documentation which states not to use the static image component. https://www.gatsbyjs.com/docs/how-to/images-and-media/working-with-gifs/

Here is my import statement at the top of the file.

import { theAnyKey } from "../images/theAnyKey.gif"

I'm not getting any 404 so I know it's sourcing the file correctly. What am I doing wrong?

Solution

  • Use default import instead of named:

    import theAnyKey from "../images/theAnyKey.gif"

    Then:

    <img src={theAnyKey} alt="is it working" />