graphQL 查詢中的字符串插值

Question

我是 Gatsby 及其 graphQL 查詢系統來檢索資產的新手。 我有一個工作組件Image可以獲取圖像並顯示它。 我想自定義圖像的名稱，但我不知道如何編輯。

這是工作組件：

const Image = () => (
  <StaticQuery
    query={graphql`
      query {
        // fetching the image gatsby-astronaut.png
        placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
);

這是我試圖擁有一個可定制的圖像：

const Image = ({ imgName }: { imgName: string }) => (
  <StaticQuery
    query={graphql`
      query {
        // fetching the image imgName
        placeholderImage: file(relativePath: { eq: "${imgName}.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
);

但它會為查詢引發以下錯誤：

Expected 1 arguments, but got 2.ts(2554)

我怎樣才能有一個可自定義的圖像名稱？

Answer 1

檢查文檔以獲取靜態查詢

StaticQuery 可以做頁面查詢可以做的大部分事情，包括片段。 主要區別是：

• 頁面查詢可以接受變量（通過 pageContext）但只能添加到頁面組件
• StaticQuery 不接受變量（因此稱為“靜態”），但可以在任何組件中使用，包括頁面

因此，您可能希望在頁面查詢中查詢圖像的GatsbyImageSharpFluid ，並將其作為流體屬性直接傳遞給 gatsby 圖像。

Answer 2

這是我遇到的簡單方法：

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

      secondImg: file(
        relativePath: { eq: "secondImg.png" }
      ) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  switch (props.name) {
    case "firstImg":
      return <Img fluid={data.firstImg.childImageSharp.fluid} />
    case "secondImg":
      return <Img fluid={data.secondImg.childImageSharp.fluid} />
    default:
      return <Img />
  }
}

並像這樣使用它：

<Image name="firstImg" />

您還可以通過引入一個包含您可能想要顯示的所有圖像的對象來使其錯字安全，如下所示：

const Images = { firstImg: 'firstImg', secondImg: 'secondImg' }

然后像這樣使用它：

<Image name={Images.firstImage} />

和

...
switch (props.name) {
case Images.firstImage:
...

Answer 3

使用ksav回答我設法用pageQuery，使這項工作並接收我想通過在特定頁面使用的圖像道具。

像這樣：

export const pageQuery = graphql`
  coverImage: file(relativePath: { eq: "coverImage.png" }) {
    childImageSharp {
      fluid(maxWidth: 600) {
        ...GatsbyImageSharpFluid_tracedSVG
      }
    }
  }
}`

如果您將此添加到您的頁面組件，您將收到帶有 coverImage.png 圖像的道具 coverImage。 希望這可以幫助！

Answer 4

這是蓋茨比可以做得更好的一個領域。 我很欣賞@ramzesenok 的回答，如果您必須將 Gatsby 框架與 graphql 一起使用，那可能是您最好的選擇。 但是你也可以像這樣回到正常的 React ：

import React from 'react';
import gatsbyAstronaut from './gatsby-astronaut.png'; 

並像這樣使用它。

<img src={gatsbyAstronaut} alt="Gatsby Astronaut" />

即使這看起來有點重，但需要導入，因此 webpack 可以正確捆綁圖像。