Gatsby 不显示我从 GraphQL 查询中检索到的图像

Question

所以，这是我的问题。我是 Gatsby 的新手，我试图找出问题所在，我为此感到头疼，因为它在语法上似乎没有错。我想展示我的英雄形象。我从 GraphQL 查询中检索了源代码，我什至可以从预览中看到图像。我做了一个控制台日志，对象是存在的，甚至是源。

import React from "react";
import { GatsbyImage } from "gatsby-plugin-image";
import { Link, StaticQueryDocument } from "gatsby";
import { graphql, useStaticQuery } from "gatsby";

export const query: StaticQueryDocument = graphql`
  {
    file(relativePath: { eq: "hero-img.JPG" }) {
      childImageSharp {
        fluid(sizes: "height: 400, width: 400") {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`;

const Hero = () => {
  const {
    file: {
      childImageSharp: { fluid },
    },
  } = useStaticQuery(query);
  console.log(fluid);
  return (
    <header className="hero">
      <div className="section-center hero-center">
        <article className="hero-info"></article>
        <GatsbyImage image={fluid} className="hero-img" alt="hero" />
      </div>
    </header>
  );
};

export default Hero;

浏览器抛出此错误：

react.development.js:220 
        
       Warning: Failed prop type: The prop `src` is marked as required in `Y`, but its value is `undefined`.
    at Y (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-44f85d35.js:615:13)
    at eval (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-44f85d35.js:635:13)
    at MainImage
    at U (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-44f85d35.js:608:13)

这是查询的结果：

{
  "data": {
    "file": {
      "childImageSharp": {
        "fluid": {
          "src": "/static/bc749621e944cd188bc61e9d9f06429f/14b42/hero-img.jpg"
        }
      }
    }
  },
  "extensions": {}
}


{base64: 'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERA…BAAE/EO1ZpcnRj5BXrxFi5QSvrDRKARRL1mvt4MwoAoyp/9k=', aspectRatio: 1, src: '/static/bc749621e944cd188bc61e9d9f06429f/14b42/hero-img.jpg', srcSet: '/static/bc749621e944cd188bc61e9d9f06429f/f836f/her…1e944cd188bc61e9d9f06429f/24a9d/hero-img.jpg 837w', sizes: 'height: 400, width: 400'}
aspectRatio: 1
base64: "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAMEBQEC/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAcnzPBHV0U65WyD/xAAcEAABBAMBAAAAAAAAAAAAAAABAgMQEgARIRP/2gAIAQEAAQUC3yFkA375Y7DS1U//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAZEAACAwEAAAAAAAAAAAAAAAAAIQEQIDH/2gAIAQEABj8CtD5iD//EABwQAAMAAgMBAAAAAAAAAAAAAAABESFBEDFRYf/aAAgBAQABPyGsCMV+jy0i0hUhX4jThqzsx0f/2gAMAwEAAgADAAAAEJwgff/EABYRAQEBAAAAAAAAAAAAAAAAABABMf/aAAgBAwEBPxAun//EABYRAQEBAAAAAAAAAAAAAAAAABABMf/aAAgBAgEBPxAmH//EABsQAQADAAMBAAAAAAAAAAAAAAEAETEQIZFx/9oACAEBAAE/EO1ZpcnRj5BXrxFi5QSvrDRKARRL1mvt4MwoAoyp/9k="
sizes: "height: 400, width: 400"
src: "/static/bc749621e944cd188bc61e9d9f06429f/14b42/hero-img.jpg"
srcSet: "/static/bc749621e944cd188bc61e9d9f06429f/f836f/hero-img.jpg 200w,\n/static/bc749621e944cd188bc61e9d9f06429f/2244e/hero-img.jpg 400w,\n/static/bc749621e944cd188bc61e9d9f06429f/14b42/hero-img.jpg 800w,\n/static/bc749621e944cd188bc61e9d9f06429f/24a9d/hero-img.jpg 837w"
[[Prototype]]: Object

我希望浏览器向我显示图像，但他却向我抛出未定义 src 的错误。我尝试使用 StaticImages 而不是 GatsbyImage，但它没有用。它只适用于基本的 img 标签，我不知道该怎么做。帮助：/

Answer 1

此代码遵循 gatsby 图像处理解决方案最新版本的语法，gatsby-image 但 Gatsby Image Plugin 公开了 StaticImage、GatsbyImage、[=14= 等方法], withArtDirection 从 graphQL 和静态来源处理和查询图像。

当使用 StaticImage 时，选项作为 props 传递给组件，而对于 GatsbyImage 组件，它们被传递给 gatsbyImageData GraphQL 解析器。 here.

中有如何在 GraphQL 查询中使用 gatsbyImageData 的示例

const query = graphql`{
    file(relativePath: { eq: "hero-img.JPG" }) {
      childImageSharp {
        gatsbyImageData(layout: FIXED)
      }
    }
  }`

const image = getImage(data.file)
<GatsbyImage 
  image={image} 
  className="hero-img" 
  alt={data.altText} 
/>

Answer 2

出现问题是因为您正在混合 gatsby-image and gatsby-plugin-image 结构。第一个在 Gatsby v2 之前有效，而 gatsby-plugin-image 应该从 v3 开始使用。

查看 migration guide 了解更多详细信息，但总而言之，当您查询 fluid 或 fixed 节点时，您使用的是已弃用的版本 (gatsby-image)。要修复它：

安装所需的依赖项：

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp

将它们添加到您的 gatsby-config.js:

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

这应该在运行 gatsby develop 或 gatsby build 时创建正确的节点。您的 GraphQL 查询应如下所示：

import React from "react";
import { GatsbyImage } from "gatsby-plugin-image";
import { Link, StaticQueryDocument } from "gatsby";
import { graphql, useStaticQuery } from "gatsby";

export const query: StaticQueryDocument = graphql`
  {
    file(relativePath: { eq: "hero-img.JPG" }) {
      childImageSharp {
        gatsbyImageData(width: 200)
      }
    }
  }
`;

const Hero = () => {
  const {
    file: {
      childImageSharp: { gatsbyImageData },
    },
  } = useStaticQuery(query);

  return (
    <header className="hero">
      <div className="section-center hero-center">
        <article className="hero-info"></article>
        <GatsbyImage image={gatsbyImageData} className="hero-img" alt="hero" />
      </div>
    </header>
  );
};

export default Hero;

当然，这可能与您的最终查询不同。 Double-check 它在 GraphiQL 游乐场 (localhost:8000/___graphql) 但请理解：不是查询流动节点，你只是得到一个 gatsbyImageData 需要传递的数据image props.

Gatsby 不显示我从 GraphQL 查询中检索到的图像

Gatsby not displaying my image retrieved from GraphQL query

reactjs

graphql

gatsby

gatsby-image