不知道有沒有細心的讀者發現，我們在做部落格或一些簡單的入門專案時，都沒有圖片的存在？
人都是視覺的動物，對於一個熱門的部落格來說，怎麼可以缺少了圖片呢？

今天我們就來介紹介紹 Gatsby Image，主要會講幾個概念

• 了解什麼是 Gatsby Image
• 使用 GraphQL 來查詢圖片
• 透過 YAML 或 MD 來獲取多張圖片

什麼是 Gatsby Image ？

Gatsby Image 是用來作圖片優化的一個插件，它能提供給我們非常棒的效能。

環境的建置

這次的章節我們會用先前做好的部落格下去做講解，如果還沒看過的讀者，可以從這篇 初探 Gatsby 之創建第一個網站 ( 上 )文章開始閱讀唷！

跟以往每個套件一樣的步驟，我們要先進行安裝並在 gatsby-config.js 中設定它，所以讓我們輸入以下指令來進行安裝吧！

npm install gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp

安裝完成後，我們添加以下設定到 gatsby-config.js 中

`gatsby-transformer-sharp`, `gatsby-plugin-sharp`

接下來我們會用 gatsby-source-filesystem 這支外掛來讀取圖片，我們預設路徑為 src/data 讓我們隨意放幾張圖片到該目錄中吧！

如果還沒安裝 gatsby-source-filesystem 的讀者，記得先安裝並設定好後，再往下閱讀唷！

查詢單張圖片的數據

我們可以用 GraphQL 透過圖片的相對路徑來撈取圖片，且能設定指定的寬度或者使用 GatsbyImageSharpFluid 來生成可以縮放的圖片，下面我們就來實際做一次吧！

我們先在想要使用的頁面中引入 gatsby-image

import Img from "gatsby-image"

接著我們會在 JSX 中想要顯示圖片的位置帶入以下程式碼

<Img
  fixed={data.file.childImageSharp.fixed}
  alt="headshot"
/>

最後，千萬不要忘記還要 Query 圖片的資訊唷，這邊我們指定是 src/image 目錄下檔名為 sample.png 圖片，並且設定寬高在 125 x 125 px。

export const query = graphql`
  query {
    file(relativePath: { eq: "image/sample.png" }) {
      childImageSharp {
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

都完成後，就讓我們開啟開發伺服器來看一下吧！

我們不僅成功地看到圖片顯示了，且 Gatsby 也幫我們做了許多處理，例如圖片的大小， Lazy Loading 等等，是不是很貼心呢？

這邊的相對路徑是指我們在 gatsby-config 當中所設定的 gatsby-source-filesystem 套件的預設資料夾，以本範例來說，就是 src/ 目錄下

限制長寬比

我們可以在 Img 元件中加入以下屬性，就能限制圖片的長寬比為 21 比 9 囉！

sizes={{ ...data.file.childImageSharp.fluid, aspectRatio: 21 / 9 }}

從 YAML 或 MD 資料中撈取圖片資料並渲染

這次範例中，我們會從 YAML 檔案中撈取圖片的資訊，並且渲染它，在開始之前，同樣的，我們需要安裝解析 YAML 的套件 gatsby-transformer-yaml，還沒安裝或沒安裝過的讀者，可以參考前幾篇的文章唷！

首先，我們在 src/ 目錄下創建一個 img.yaml 檔，檔案的內容就如下圖一般，放入我們要顯示圖片的相對連結。

接著我們來調整剛剛的範例，大部分的程式碼都相同，差別只在於 Query 與撈回來的資料需要處理一下。

首先我們先將 Query 改成以下結構

query {
  allImgYaml {
    edges {
      node {
        image {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}

這邊 allImgYaml 這個節點，會隨著你的檔名做變更，例如檔案檔名為 blog ，那節點名稱就會變成 allBlogYaml。

改完 Query 結構後，JSX 內我們也要調整，因為撈出來的資料會在一個陣列內，所以我們可以用跑迴圈的方式或向下方程式碼一樣，指定 index 來撈出圖片。

const node = data.allImgYaml.edges[0].node;

我們在上方將變數 assign 好後，直接將 Img 元件裡面的 fixed 修改為下方程式碼

fluid={node.image.childImageSharp.fluid}

最後，我們就能回到瀏覽器中，看看我們修改後的結果囉！

我們獲得了一張滿版的圖片。

多張圖片渲染

上面我們提到撈出來的資料是擺在一個陣列中，所以我們來試試看用迴圈來渲染多張圖片吧

首先我們需要調整兩個地方，一個是我們一開始 assign 的變數應該要調整為

const nodes = data.allImgYaml.edges

接著將 Img 的元件的部分改寫為

{
	nodes.map(({ node }) => (
    <Img fluid={node.image.childImageSharp.fluid} alt={node.alt} />
  ))
}

最後讀者就能在 YAML 檔中多新增幾張圖片試試看囉！

參考資料

Gatsby - Gatsby Image