我也一直在寻找这个答案。希望这能回答你的问题：

最终代码：

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

// Note: You can change "images" to whatever you'd like.

const Image = props => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid(maxWidth: 600) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}
    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; sizes={imageSizes}
      return <Img alt={props.alt} fluid={image.node.childImageSharp.fluid} />;
    }}
  />
);

export default Image;

使用图像：

import Image from '../components/Image';
<div style={{ maxWidth: `300px` }}>
    <Image alt="Gatsby in Space" filename="gatsby-astronaut.png" />
</div>

解释

因为 StaticQuery 在其模板文字中不支持字符串插值，所以我们无法真正向它传递任何props。相反，我们将尝试处理 StaticQuery 的 Render 部分中的props检查。

注意事项

我不是 100% 确定这是否会影响编译时间，因为我们正在扫描所有图像。如果有，请告诉我！

更新：如果您有很多图像，捆绑包的大小可能会变得非常大，因为此解决方案确实会扫描所有图像。

进一步定制

如果没有传递props，您可以调整代码以显示占位符图像。

备择方案

也就是说，还有另一种方法可以解决这个问题，但需要更多的工作/代码。

来源

• 我修改了这篇文章中的代码。（请注意，该文章使用的是已弃用的代码。）

不幸的是，据我所知，最好的解决方案是为图像写出单独的 js 文件。

在@RodrigoLeon 的方法中，它会导致包大小显着增加。特别是如果说你有超过 50 张图片。因为无论何时您使用它并遍历所有图像，您都会在组件文件中创建对它们的引用。所以我不建议这样做。

我正在建立的网站是一个电子商务平台，拥有数千张图片（所有产品）。这提出了使用 gatsby 查询图像的主要问题。很长一段时间，我有一个组件可以查询所有图像并将它们与各自的产品相匹配。（就像在this中提出的那样）这是非常低效的，会抛出有关查询持续时间的警告。

另一种方法是在数据级别将 imageFile 附加到产品，而不是在尝试渲染时。

src/gatsby-api/create-resolvers/index.js

const resolvers = {
    AWSAppSync_Product: {
        imageFile: {
            type: 'File',
            resolve: async (source, args, context, info) => {
                const node = await context.nodeModel.runQuery({
                    query: {
                        filter: {
                            Key: { eq: source.image1 }
                        }
                    },
                    type: 'S3Object',
                    firstOnly: true
                });

                if (node && node.imageFile) return node.imageFile;
            }
        },
    },
}

module.exports = {
    resolvers
}

gatsby-node.js

exports.createResolvers = async ({ createResolvers }) => {
    createResolvers(resolvers)
}

源代码/组件/图像/index.js

import React from 'react'
import Img from 'gatsby-image'

export const Image = props => {
  if (props.imageFile && props.imageFile.childImageSharp && props.imageFile.childImageSharp.fluid) {
    return <Img className={props.imgClassName} alt={props.alt} fluid={props.imageFile.childImageSharp.fluid} />;
  }
};

然后像这样使用它：

<Image
  imageFile={product.imageFile}
  alt=""
/>

AWSAppSync_Product是我将文件附加到的节点类型。（可以在本地主机上的 graphql 游乐场中找到）。解析将匹配产品Key上的S3Objectwith image1（这是一个字符串）。这使我可以直接使用产品图像，而无需在图像组件内运行查询。

在我看来，一旦你把它放在心上，这是一条有value的信息，它肯定对我有很大帮助。

如果您将 Wordpress 与 WP GraphQL 一起使用，并想动态加载一些帖子，您将面临同样的问题。您将无法使用出色的预处理功能，例如降低质量和使用粗略的 base64 占位符。正如前面提到的，@RodrigoLeon 解决方案是可行的，但如果您的网站最终在图像中增长，您将面临巨大的负载。

由于我的网站将包含大量帖子，并且会动态加载此类帖子，因此我必须想出一个至少可以接受的解决方案。我最终要做的是为我的网站的动态部分生成 childImageSharp（并提供一个通用的 base64 占位符），因此我总是可以传递childImageSharp给<Img>Gatsby的组件。

以下是帖子中特色图像的流体图像类型示例：

• 确保将其包含在您的 GQL 中：

featuredImage {
  node {
    sourceUrl
    mediaDetails {
      file
      width
      height
      sizes {
        file
        name
        width
        sourceUrl
      }
    }
  }
}

加载您的帖子后，通过此功能发送文件节点（featuredImage）的每个节点：

/**
 * Attaches a sharped image to the node for Gatsby Image.
 * @param image Dynamic image node to expand.
 * @param maxWidth Real existing width of file to use as default size.
 */
function attachChildImageSharp(
  image,
  maxWidth
) {
  const mediaDetails: IWpMediaDetails = image.mediaDetails;
  if (mediaDetails) {
    maxWidth = maxWidth || mediaDetails.width;
    image.localFile = image.localFile || {};
    image.localFile.childImageSharp = image.localFile.childImageSharp || {};
    const childImageSharp = image.localFile.childImageSharp;

    // only supporting fluid right now:
    const fluid = (childImageSharp.fluid =
      childImageSharp.fluid || {});
    fluid.aspectRatio =
      mediaDetails.width && mediaDetails.height
        ? mediaDetails.width / mediaDetails.height
        : undefined;
    fluid.originalImg = image.sourceUrl;
    fluid.originalName = mediaDetails.file;
    fluid.presentationHeight =
      fluid.aspectRatio && maxWidth
        ? Math.round(maxWidth / fluid.aspectRatio)
        : mediaDetails.height;
    fluid.presentationWidth = maxWidth;
    fluid.sizes = `(max-width: ${maxWidth}px) 100vw, ${maxWidth}px`;

    const srcSets = [];
    const allowedSizes = ["medium", "medium_large", "large"];
    mediaDetails.sizes.forEach((size) => {
      if (allowedSizes.indexOf(size.name) >= 0) {
        if (
          size.width === `${fluid.presentationWidth}`
        ) {
          fluid.src = size.sourceUrl;
        }
        srcSets.push(`${size.sourceUrl} ${size.width}w`);
      }
    });

    fluid.srcSet = srcSets.join(",\n");
  } else {
    console.warn("Unable to attach dynamic image sharp: Missing mediaDetails.");
  }
}

您将像这样调用该函数（也是附加通用 base64 图像的好地方）：

posts.nodes.forEach((post) => {
  attachChildImageSharp(post.featuredImage.node, 768);
   post.featuredImage.node.localFile.childImageSharp.fluid.base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2NgYGD4DwABBAEAcCBlCwAAAABJRU5ErkJggg=="; // 1x1 black PNG, from https://shoonia.github.io/1x1/#000000ff
});

请注意，不可变对象会导致错误，因此请禁用缓存（fetchPolicy: 'no-cache'如果您使用 ApolloClient）。选择一个宽度作为第二个参数，它是您在 Wordpress 设置中为图像大小（不包括缩略图）选择的三个宽度之一。

此解决方案适用于 Gatsby Image V1，并且通过所有尝试，它并不完美，但它满足了我的需要。