Гэтсби образ путь от JSON - PullRequest
Новая
       14

Гэтсби образ путь от JSON

0 голосов
/ 30 сентября 2018

Редактировать: все получилось , даже если он чувствует себя как-то не так ... Любые идеи, позволяющие использовать только имя файла, а не относительный путь, будут оценены.Во всяком случае, вот как у меня это работает:

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 / 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 и т. д.)

Любые указатели приветствуются!:)

1 Ответ

0 голосов
/ 04 февраля 2019

Ваш запрос должен выглядеть следующим образом: 

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

Тогда вы можете вывести путь следующим образом: 

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

Вам не нужно использовать жидкость, вы используете другие типов отзывчивых изображений

...