如何在 Gatsby GraphQL 查询中加载图像

Question

我有一个带有产品的小型 SQLite 数据库，这些产品具有图像的相对路径。我想将这些图像包含到我的页面中。我正在尝试使用此查询：

query {
  allContent {
    nodes {
      Category
      Description
      Price
      ProductID
      Title
      ImageURI {
        childImageSharp {
          gatsbyImageData(width: 200)
        }
      }
    }
  }
}

但是我有这个错误：


      Field "ImageURI" must not have a selection since type "String" has no subfields.

      This can happen if you e.g. accidentally added { } to the field "ImageURI". If you didn't expect "ImageURI" to be of type "String" make sure that your input source and/or plugin
 is correct.
      However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query in GraphiQL and use the GraphiQL explorer to see which fields
you can query and what shape they have.

      It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned
      "dummy content". Visit our docs to learn how you can define the schema for "undefined":
      https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions

据我了解，我应该在查询中将 String 转换为 File。这样对吗？如果是，该怎么做？

要重现的完整代码和回购协议：https://github.com/vladd11/gatsby-test/blob/master/src/pages/index.js

Answer 1

只需查询所有内容节点之外的所有文件。喜欢：

allFile {
    edges {
      node {
        relativePath
        childImageSharp {
          gatsbyImageData(width: 200)
        }
      }
    }
}

不要忘记向 Gatsby Config 添加新的数据源：

{
    resolve: "gatsby-source-filesystem",
    options: {
        path: `${__dirname}/static`, // Directory with your images
        name: "images",
    },
}

在该目录下使用相对路径查找图片，然后动态加载图片：

getImage(data.allFile.edges.find(value => value.node.relativePath === product.ImageURI).node)

使用 GatsbyImage 显示这张图片：

<GatsbyImage alt={product.Title} image={Image}/>

如何在 Gatsby GraphQL 查询中加载图像

How to load image in Gatsby GraphQL query

graphql

gatsby