[Gatsbyで構築]gatsby-image から gatsby-plugin-image に変更する方法

久しぶりにGatsbyの環境をアップデートしたら二つほど重要な変更があったので、それに対応させる作業をしました。

1つ目はgatsby-imageからgatsby-plugin-imageへの変更です。
プラグイン名の変更だけではなく、API等の変更もありましたので、実際に使っている項目で変更を行った部分を書いておきます。

fluidがdeprecatedとなりましたので、constrainedに変更しました。

重要な変更の2つ目は、

スポンサーリンク

プラグインの名前

変更前:gatsby-image
変更後:gatsby-plugin-image

インポート

変更前:

import Img from "gatsby-image"

変更後:

import { GatsbyImage } from "gatsby-plugin-image"

GraphQL

変更前:

childImageSharp {
    fluid(maxWidth: 300) {
        ...GatsbyImageSharpFluid
    }
}

変更後:

childImageSharp {
    gatsbyImageData(layout: CONSTRAINED)
}

表示

変更前:fluid={data.myImage.childImageSharp.fluid}
変更後:image={data.myImage.childImageSharp.gatsbyImageData}

感想

書きやすくなったような気もします。

constrainedに変更しただけで問題なかったのでしばらく様子見です。
width、heightが使えるようなので、おいおい調べてみます。

タイトルとURLをコピーしました