GatsbyでGifを動作させる(TypeScript)

はじめに

gatsbyでgif画像をアニメーションしている状態で表示させたいという場面があり、普通に../images/フォルダにgifファイルを置いても動作できなかったので、やり方を調べてみました。

本家ドキュメントによると

ドキュメントにはimagesではなく、../gifs/フォルダに置いてとありました。

../images/ に入れた場合gatsby-plugin-image で最適化の対象となりますが、gifアニメーションはその最適化を受けられないようです。

../gifs/ (フォルダ名はなんでもよいようですが)に入れた場合、通常の静的アセットとして扱われるということです。

import * as React from 'react'

import Layout from '../components/layout'
import otterGIF from '../gifs/otter.gif'

const AboutPage = () => (
    return (
        <Layout>
            <img src={otterGIF} alt="Otter dancing with a fish" />
        </Layout>
    )
)

export default AboutPage;

型定義

ただ、typescriptの場合では型エラーが出るため、

Cannot find module '../gifs_test/audio.gif' or its corresponding type declarations.ts(2307)

以下のようにしておくと、.gif ファイルを 型安全にインポート できるようになります。

declare module "*.gif" {
  const value: string
  export default value
}

これで、Gatsby で GIF をスムーズに動作させることができました。