画像を扱う
# プラグインの導入
yarn add gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp
# プラグインの設定
追記
code:gatsby-config.js
plugins: [
"gatsby-plugin-emotion",
"gatsby-plugin-image",
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
# 静的な画像を表示
imagesディレクトリの画像やURLの決まった画像を表示する場合はStaticImageコンポーネントを利用します。
code:index.tsx
import {StaticImage} from "gatsby-plugin-image";
// markup
const IndexPage = ({ data }: PageProps<GatsbyTypes.TopPageQuery>) => {
return (
<main>
<p>hello gatsby</p>
<StaticImage
src={"../images/hacktyu.png"}
alt={"hacktyu"}
width={100}
height={100}
/>
https://i.gyazo.com/ba816f1b7300b9139bfe92ad76b74beb.png
# 動的な画像を扱う
StaticImageコンポーネントのsrc属性に変数を入れることはできません。
GraphQLサーバー経由で取得できる画像にはGatsbyImageコンポーネントを使います。
# 注意
現状microCMSから取得した画像を最適化して表示するのは少し大変なので通常のimgタグを使うのが簡単です。
https://i.gyazo.com/b0341b2a431b219df12dfc6d4e867483.png
code:{microcmsBlogs.blogsId}.tsx
import * as React from "react"
import {graphql, PageProps} from "gatsby";
export default function BlogDetail({data}: PageProps<GatsbyTypes.BlogDetailQuery>) {
return (
<div>
<img
src={data.microcmsBlogs?.thumbnail?.url ?? "../images/hacktyu.png"}
alt={data.microcmsBlogs?.title ?? "default alt"}
loading="lazy"
/>
<h1>{data.microcmsBlogs?.title ?? "デフォルトタイトル"}</h1>
<div dangerouslySetInnerHTML={{ __html: data.microcmsBlogs?.body ?? "本文" }}/>
</div>
)
}
export const query = graphql`
query BlogDetail ($blogsId: String) {
microcmsBlogs(blogsId: {eq: $blogsId}) {
body
title
blogsId
thumbnail {
height
url
width
}
}
}
`
# 詳細はこちら