Gatsby : 이미지 (이미지)를 표시하는 방법

다이나믹하게 로드하고 표시

이것은 도대체…?

기본적으로 톱 페이지에 붙여진 스페이스 맨 이미지 "gatsby-astronaut.png".


이 파일은 images 폴더 안에 있고, 그것을 읽는 톱 페이지 index.js는,

//index.js
<Image />

그리고만 있다.

? ? ? ? ?

분명히 components 폴더에있는 image.js가 핸들하는 것 같습니다 (기본적으로 존재).

//components/image.js デフォルトのコード

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const Image = () => {
  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
}

export default Image

이 코드를 초역하면,
gatsby-astronaut.png라는 파일명과 일치하는 것을 찾아 와서 (8행째, eq: "gatsby-astronaut.png") 자동으로 이미지를 최적화하고 반응형으로 표시한다.
게다가 dig down(추궁)하지 않지만 Lazy loading까지 해준다. 곁에 gatsby-astronaut.png를 다른 무거운 이미지로 바꿔보고 표시시키면 흐릿한 상태에서 페이드 인하도록 분명한 이미지로 부드럽게 바뀝니다. 좀처럼 감동한다.

따라서 이미지 파일은 모두 images 폴더에 놓고, 이 gatsby-astronaut.png라는 곳을 표시시키고 싶은 이미지 파일명으로 변경하고, 표시시키고 싶은 페이지측에서 <Image /> 태그를 쓰는 것만으로 끝난다.

그러나 그럼 이미지는 하나밖에 사용할 수 없는가…

해결 방법

많은 사람들이 이미 해결 방법을. image.js를 다음과 같이 변경.

//components/image.js

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const Image = (props) => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid(maxWidth: 300) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}

    /*
      サイズFIXしたい時は上記childImageSharp {...}の中を以下のように変更
              sizes(maxWidth: 300) {
                ...GatsbyImageSharpSizes
              }
    */
    render={(data) => {
      const image = data.images.edges.find(n => {
        return n.node.relativePath.includes(props.filename);
      });
      if (!image) { return null; }
      //const imageSizes = image.node.childImageSharp.sizes; ←サイズFIXしたい時
      return (
        /*<Img alt={props.alt} sizes={imageSizes} /> ←サイズFIXしたい時 */
        <Img fluid={image.node.childImageSharp.fluid} alt={props.alt} />
      );
    }}
  />
)
export default Image

표시하는 측에서는 다음과 같이 화상 파일명을 지정한다. 이미지는 물론 디폴트의 src/images 폴더 아래에 두는 것만.

// index.js
・・・略・・・
<Image filename="gatsby-astronaut.png" alt="Gatsbyスペースマン" />
・・・略・・・

정적에 로드하여 표시

그러나 아무래도 src=""라고 하는 읽는 방법을 하고 싶은 경우가 있다. 예를 들어 React bootstrap에서 Card.img의 src 속성. 다음과 같이

 <Card>
     <Card.Body>
        <Card.Img variant="top" src="" />
           <Card.Title>タイトル</Card.Title>
           <Card.Text>
　　　　　　　本文本文本文本文本文本文本文本文本文本文本文本文
           </Card.Text>
     </Card.Body>
</Card>

이런 경우에 <Card.Img variant="top" src="./images/gatsby-astronaut.png" /> 라든가 해도 화난다. 그럼 어떻게 할까?

먼저 가져오기
import gatsbyOjisanImg from './images/gatsby-astronaut.png'에서 가져옵니다. 그리고 gatsbyOjisanImg 를 src 인수에.

import React from "react"
import { Card } from 'react-bootstrap'
import gatsbyOjisanImg from './images/gatsby-astronaut.png' // ←ココ

 <Card>
     <Card.Body>
        <Card.Img variant="top" src={gatsbyOjisanImg } />
           <Card.Title>タイトル</Card.Title>
           <Card.Text>
　　　　　　　本文本文本文本文本文本文本文本文本文本文本文本文
           </Card.Text>
     </Card.Body>
</Card>

스텝이 하나 늘어나면 귀찮을지도 모르지만 그 대신 이미지 최적화를 Gatsby가 해준다.

다음은 꽤 큰 테이블 이미지를 Card.img로 지정했지만 Gatsby가 최적화하여 표시해준 bootstrap 카드의 예.


이상.

홍보

microCMS는 제외하고, Gatsby의 기본과 node API의 취급에 대해서 밟아 해설·핸즈온 한 전자 서적을 상급했으므로, 좋으면 손에 들여 보세요.

JAMStack을 배우자 Gatsby, React bootstrap, Netlify로 만드는 기업 사이트: 더 이상 렌탈 서버 필요 없음 Gatsby와 microCMS를 조합한 기업 사이트 작성 절차를 해설 핸즈온한 속편을 상처했습니다. 아무쪼록 손에 들여보세요.
JAMStack을 배우자 Gatsby와 microCMS로 만드는 기업 사이트 ~WordPress는 이미 오래된~