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} />}
  />
);

但是对于此查询，它会引发以下错误：

预计1个参数，但得到2个.ts(2554)

我该如何拥有可自定义的图像名称？

- Baboo

Answer 1

以下是我发现的简单方法：

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:
...

- ramzesenok

---

非常方便 - Baboo

Answer 2

请查阅 静态查询文档

静态查询可以完成大部分页面查询的任务，包括片段。主要区别在于：

• 页面查询可以通过页面上下文接受变量，但只能添加到页面组件中
• 静态查询不接受变量（因此命名为“静态”），但可用于任何组件，包括页面

因此，在您的页面查询中查询图像的 GatsbyImageSharpFluid 并将其作为 fluid 属性直接传递给 Gatsby 图像。

- ksav

---

我没有成功让它工作，但是你的回答很相关。谢谢！ - Baboo

Answer 3

使用ksav的答案，我通过使用pageQuery使其工作，并通过props在特定页面接收要使用的图像。

就像这样：

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

如果您将此添加到页面组件中，您将收到带有coverImage.png图像的props coverImage。 希望这可以帮助您！

- am1991

Answer 4

这是 Gatsby 可以做得更好的一个领域，我个人认为。我很感激 @ramzesenok 的回答，如果你必须使用带有 GraphQL 的 Gatsby 框架，那么这可能是最好的选择。但你也可以像这样回退到 normal React：

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

并像这样使用它。

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

即使这看起来有点繁重，但是必须导入它，这样webpack才能正确地打包图像。

- tom