Gatsby×ブログ - 画像を使い回す方法
— Gatsby — 1 min read
やりたいこと
- 使い回す画像を1箇所にまとめておきたい
- 記事に画像を入れるときは,できるだけ簡単にしたい
コンポーネントを作る
{プロジェクト}/img/my-icon
となるフォルダを作成
gatsby-config.js
1module.exports = {2 plugins: [3 {4 resolve: `gatsby-plugin-alias-imports`,5 options: {6 alias: {7 "@components": "src/components",8 },9 extensions: ["js", "jsx", "ts", "tsx"],10 },11 },12 {13 resolve: `gatsby-source-filesystem`,14 options: {15 name: `img`,16 path: `${__dirname}/img/`,17 },18 },19 `gatsby-plugin-image`,20 `gatsby-plugin-sharp`,21 `gatsby-transformer-sharp`,22 ].filter(Boolean),23}
{プロジェクト}/src/components/img.tsx
1import * as React from "react"2import { useStaticQuery, graphql } from "gatsby"3import { GatsbyImage, IGatsbyImageData, getImage } from "gatsby-plugin-image"4
5type ImgStatic = {6 allFile: {7 nodes: {8 relativeDirectory: string9 name: string10 childImageSharp: {11 gatsbyImageData: IGatsbyImageData12 }13 }[]14 }15}16
17type ImgProps = {18 folder?: string19 name: string20 width?: string21}22
23const Image = (props: ImgProps) => {24 const data = useStaticQuery<ImgStatic>(graphql`25 {26 allFile(filter: {sourceInstanceName: {eq: "img"}}) {27 nodes {28 relativeDirectory29 name30 childImageSharp {31 gatsbyImageData32 }33 }34 }35 }36 `)37 const img = data.allFile.nodes.find(e => ((!props.folder && !e.relativeDirectory) || e.relativeDirectory == props.folder) && e.name == props.name)38 if(img) return <GatsbyImage image={getImage(img)} alt={img.name} style={{width: props.width}} />39 else return <div>Not Found</div>40}41
42export default Image43
44export const MyIcon = (props: ImgProps) => {45 return <Image folder="my-icon" {...props} />46}
投稿記事
1---2/*** Frontmatter ***/3---4
5import Img, { MyIcon } from "@components/img"6
7## 記事8
9<Img folder="my-icon" name="chara-icon" />10
11<MyIcon name="chara-icon" />12
13## きじ
MyIcon
はfolder="my-icon"
を書かずにすむ.
使用頻度が高いものを使う時用.
※見様見真似で作ったプログラムなので,上手く行かないときはごめんなさい.
Tips
- 画像を入れる img フォルダは基本どこでもOK.
gatsby-config.js の filesystem > path の修正もすること. gatsby-plugin-alias-imports
のプラグインはお好みで.- filesystem の name は GraphQL のフィルターで使う名前.
<Img name="chara-icon" />
のようにImg
でフォルダ指定しない場合,imgフォルダ直下の画像を見るようにしている.style
で幅指定をしている.ほかにも色々できると思う.
— Gatsby —