来自 json 的 Gatsby 图像路径

Question

编辑：得到它的工作，即使这样感觉有点不对。任何可以只使用文件名而不是相对路径的想法将不胜感激。无论如何，这就是我的工作方式：

数据.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/data.json

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

如果我不提供纯文件名，而是为它工作的网络上的任何图像提供一个 url。尝试让它按如下方式工作：

gatsby-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 等）

任何指针将不胜感激！ :)

Answer 1

您的查询应该与此类似：

export const productsQuery = graphql`
  query {
    allDataJson {
      edges {
        node {
          slug
          name
          image{
            publicURL
            childImageSharp{
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  }
`

然后你可以像这样输出路径：

<img src={node.image.childImageSharp.fluid.src} />

你不用流体，你用其他types of responsive images