GatsbyJS 文件为空 - 设置 relativePath 不起作用答案

【问题标题】：GatsbyJS file is null - setting relativePath doesn't workGatsbyJS 文件为空 - 设置 relativePath 不起作用
【发布时间】：2020-12-26 03:48:20
【问题描述】：

我正在尝试提取图像：/src/images/es.png

并将其显示在 gatsby 页面上。这是页面代码：

import React from "react"
import {
  Header,
  Image,
} from 'semantic-ui-react';
import { graphql } from 'gatsby'
import Img from 'gatsby-image'

import Layout from '@/components/layout'
import SEO from '@/components/seo'

export const query = graphql`
  query {
    file(
      relativePath: { eq: "images/es.png" },
      sourceInstanceName: {
        eq: "images"
      }
    ) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

export default ({ data }) => (
  <Layout>
    <SEO title="Earthshaker" />
    <div style={{ height: '100%' }}>
      <Header
        as="h1"
        style={{
          color: 'white',
        }}
      >
        Earthshaker
      </Header>
      { JSON.stringify(data) }
      {/* <Img fixed={data.file.childImageSharp.fixed} /> */}
    </div>
  </Layout>
)

这是配置代码：

plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,

这是我的文件结构：

- src
 - images
  - es.png
 - components
  - heroes
   - earthshaker <---- (this is the page code HERE)

我希望图像被拉出，但我总是得到file: null。我做错了什么？

【问题讨论】：

标签： javascript gatsby gatsby-image

【解决方案1】：

假设您的查询有效，我会将您的文件系统路径更改为：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images/`,
  },
},

此外，我会检查查询以查看它是否在 GraphQL 游乐场 (localhost:8000/___graphql) 中收集了预期结果。其余代码看起来不错。

【讨论】：