Gatsbyでの画像表示方法

画像の用意

• src/imagesディレクトリに画像ファイルを保存する。
  • 今回は、Qiitaのロゴ画像を使用する。
    • ダウンロード元 - https://help.qiita.com/ja/articles/others-brand-guideline
    • src/images/qiita.pingで保存

書き方

src/components/ExampleComponent.jsx

import React from 'react';
import QiitaIcon from '../images/qiita.png';

const ExampleComponent = () => (
  <div>
     <img src={ QiitaIcon } alt="Qiita" />
  </div>
);

export default ExampleComponent;

参考サイト

• 入門者でもわかるGatsbyでの画像の設定方法