gatsby-image が非推奨になり gatsby-plugin-image に推奨されていたので使い方を解説してみた
「The gatsby-image package is now deprecated. (gatsby-imageパッケージは、現在、非推奨となっています。)」
とのことだったので推奨されていた gatsby-plugin-image を使うことにしました。
使い勝手が少し異なりましたが以前よりも便利になりました。
成果物と概要
読み込み時をblurupさせてボヤッと出現する画像表示です。
gatsby-plugin-imageプラグインは、StaticImageとGatsbyImageの2つのコンポーネントを使います。
StaticImageは相対パスですぐに最適化した画像を引っ張ってこれるため使い勝手が良いです。GraphQLを使わずに済みます。
GatsbyImageはGraphQLから引っ張ってきたものを使います。こちらの方がgatsby-imageの頃の使い方に近いかと思います。
使い分けとしては画像枚数が多いことやGraphQLを引っ張るまでもない時はStaticImageを使うと良いかなと思います(もう少し良い選定方法があれば知りたいです。)
準備
インストール
まずはプロジェクトを作成。
gatsby new GatsbyPluginTest https://github.com/gatsbyjs/gatsby-starter-hello-world
※gatsby-cliが入っていない人は別途インストール
関連プラグインもインストール。
yarn add gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp gatsby-source-filesystem
画像
o-danでフリー素材画像を任意の名前で保存します。
gatsby-config.jsの設定
module.exports = {
plugins: [
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images/`,
},
},
],
}
srcディレクトリ構造
src
images
shiva.jpeg(任意の画像)
pages
index.js
StaticImageを使うやり方
StaticImageは相対パスを指定してあげるだけなのでかなり楽です。
import React from "react";
import { StaticImage } from "gatsby-plugin-image";
const Home = () => {
return (
<div>
<h1>Hello world!</h1>
<StaticImage
src="../images/shiva.jpeg" // 相対パス
width={600}
alt="Shiva"
placeholder="blurred" // ボヤッと読み込ませるオプション。他にもいくつかある
quality="40" // 画質
/>
</div>
);
}
export default Home;
特に説明は不要かなと思います。
GatsbyImageを使うやり方
GraphQLを使います。また、ライブラリから GatsbyImage だけでなく getImageメソッド も引っ張ってきます。 getImageメソッド は GatsbyImageコンポーネント の src属性image属性 に使います。
import React from "react";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { graphql } from "gatsby";
const Home = ({ data }) => { // graphqlでデータを引っ張ると data に 返り値 が返ってくる
const GatsbyImages = data.allFile.edges.map(({node}) => {
return <GatsbyImage image={getImage(node.childImageSharp)} alt={node.name} key={node.name} />
})
return (
<div>
<h1>Hello world!</h1>
{GatsbyImages}
</div>
);
}
export const query = graphql`
query MyQuery {
allFile {
edges {
node {
name // altとkey属性用
childImageSharp {
gatsbyImageData(
blurredOptions: {width: 100} // blurオプション。widthを小さくした方がblurっぽいかなと
width: 600
placeholder: BLURRED // blurup
)
}
}
}
}
}
`;
export default Home;
二つ並べてみた
特に意味はない
Author And Source
この問題について(gatsby-image が非推奨になり gatsby-plugin-image に推奨されていたので使い方を解説してみた), 我々は、より多くの情報をここで見つけました https://qiita.com/akifumiyoshimu/items/ccb5c93b3d962f9e4f3f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .