Edit: Got it working 即使这种方式感觉有点错误 . 任何想法都可以只使用文件名而不是相对路径,我们将不胜感激 . 无论如何,这是我如何工作:

data.json

[
        {
          "slug": "bloom",
          "name": "Bloom",
          "image": {
            "src": "../images/socks1.jpg"
          }
        }
]

查询:

{
  allDataJson {
    edges {
      node {
        slug
        name
        image {
          src {
            childImageSharp {
              fluid {
                src
              }
            }
          }
        }
      }
    }
  }
}


我试图显示一个图像,其名称存储在data.json中,文件本身在src / images中

SRC /数据/ data.json

[
        {
          "slug": "sock1",
          "name": "sock1",
          "image": "socks1.jpg"
        }
]

如果不是纯文件名,我提供网站上任何图像的网址 . 尝试让它工作如下:

盖茨比-config.js

module.exports = {
      plugins: [
        {
          resolve: `gatsby-source-filesystem`,
          options: {
            name: `data`,
            path: `${__dirname}/src/data`,
          },
        },
        {
          resolve: `gatsby-source-filesystem`,
          options: {
            name: `images`,
            path: `${__dirname}/src/images`,
          },
        },
        `gatsby-transformer-json`,
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
      ],
    }

product.js

import React from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/layout'
import get from 'lodash/get'

class ProductPage extends React.Component {
  render() {

    const products = get(this, 'props.data.allDataJson.edges')
    console.log(products)

    return (
      <Layout>
        {products.map(({ node }) => {
          return (
            <div key={node.name}>
              <p>{node.name}</p>
              <img src={node.image} />
            </div>
          )
        })}
      </Layout>
    )
  }
}

export default ProductPage


export const productsQuery = graphql`
  query {
    allDataJson {
      edges {
        node {
          slug
          name
          image
        }
      }
    }
  }
`

所有在前端输出的都是

<img src="socks1.jpg">

如果我查询GraphiQl中的所有文件,我得到它们,但是(不确定这个)我认为图像字段不被识别为文件类型字段(对于src等无法查询)

任何指针将非常感谢! :)