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

问题描述

我正在尝试提取图像：/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。我在做什么错了？

解决方法

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

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

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