Gatsby GraphQL 文件 Returns 图像错误

Question

所以我试图获取在我的 markdown post 中定义的图像，当我使用 GraphQLi 时，查询有效，但在我的 JS 代码中它返回了错误的图像。

import React, { ReactElement } from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import { GatsbyImage } from 'gatsby-plugin-image';

export const Img = (props: { alt: string; src: string }): ReactElement => {
  const { alt, src } = props;

  const imageName = src.split('/').slice(-1)[0];

  const data = useStaticQuery(graphql`
    query GetImage($imageName: String) {
      file(relativePath: { eq: $imageName }) {
        childImageSharp {
          gatsbyImageData
        }
      }
    }
  `);

  console.log(imageName, data.file.childImageSharp.gatsbyImageData);

  return <GatsbyImage alt={alt} image={data.file.childImageSharp.gatsbyImageData} />;
};

控制台日志的结果

我希望得到 office1 图片，但它返回给我的是 docker 图片

更新 1：

所以我正在尝试 StaticImage，因为 use 查询似乎不需要变量。所以我有以下代码仍然根本不渲染图像，甚至没有 alt text

import React, { ReactElement } from 'react';
import { StaticImage } from 'gatsby-plugin-image';

export const Img = (props: { alt: string; src: string }): ReactElement => {
  const { alt, src } = props,
    imageUrl = `../../images/${src}`;

  console.log(imageUrl);
  console.log('----');

  return <StaticImage alt={alt} src={imageUrl} />;
};

图像 url 日志 ../../images/office1.jpg。如果我执行以下操作，图像呈现良好

return <StaticImage alt={alt} src='../../images/office1.jpg' />;

Answer 1

嗯，你发现了所有问题：

StaticQuery（或useStaticQuery）不接受变量（因此得名）所以下面的片段永远不会工作：
```
 const data = useStaticQuery(graphql`
   query GetImage($imageName: String) {
     file(relativePath: { eq: $imageName }) {
       childImageSharp {
        gatsbyImageData
       }
     }
   }
 `);
```
来自docs:

useStaticQuery does not accept variables (hence the name “static”), but can be used in any component, including pages
StaticImage 不接受动态参数，它是一个 known restriction:

The images are loaded and processed at build time, so there are restrictions on how you pass props to the component. The values need to be statically-analyzed at build time, which means you can’t pass them as props from outside the component, or use the results of function calls, for example. You can either use static values, or variables within the component’s local scope

所以这意味着你不能从 props 提升或传递任何值，但你可以获得 static/local 访问路由：

这会起作用：
```
 export function Image() {
   const source= 'image.png'; 
    return <StaticImage src={source} />
 }
```
这不会：
```
 export function Image(props) {
    return <StaticImage src={props.source} />
 }
```

两者都是已知的限制，有据可查

所以，回答你的问题，如果你想使用动态源，你有 2 个选项（至少）：

使用带有动态源的标准 <img> 标签
将GatsbyImage与JavaScript过滤一起使用（filter, find, etc) using a page query（不是静态的）。页面查询的另一个限制是它们只在顶级组件（页面）中工作，所以想法是将您的查询放在那里并钻取图像到组件以在需要时使用 JavaScript 以与您对 $imageName.

Gatsby GraphQL 文件 Returns 图像错误

Gatsby GraphyQL File Returns Wrong Image

gatsby

gatsby-image