GatsbyでHP作成その7：TOPページに画像を表示

2022-03-22

トップページに画像を入れてみました。

StaticImageコンポーネント

こちらの記事を参考に、StaticImageコンポーネントを使って画像を表示してみます。

導入

yarn add gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem

module.exports = {
    ：
  plugins: [
      ：
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
      ：
  ],
}

画像表示

トップページは、src/pages/index.jsを表示します。

    ：
import { StaticImage } from "gatsby-plugin-image"
    ：
const BlogIndex = ({ data, location }) => {
    :
    :    
  return (
    <Layout location={location} title={siteTitle}>
      <Seo title="Top" />
      <StaticImage 
        src="../images/mori.jpg" 
        alt="はーつん"
        layout="fullWidth"
      />
      :