Не могу загрузить изображения из Contentful, используя GatsbyJS - PullRequest
Новая
       54

Не могу загрузить изображения из Contentful, используя GatsbyJS

1 голос
/ 05 февраля 2020

Первый раз здесь пишу, но я боролся с этим уже несколько дней.

По сути, у меня есть запрос graphQL, который извлекает данные продукта из контента и затем отображает их на Gatsby JS страница Запрос правильно отображает название, цену и описание продукта, но не загружается в изображение. К сожалению, я продолжаю получать ошибки, такие как:

"Ошибка типа: невозможно прочитать свойство '0' из неопределенных"

или

Невозможно прочитать свойство 'sr c' из неопределенных , (При изменении запроса для просмотра sr c изображения. Когда я делаю этот метод, URL-адрес имеет значение в соответствии с GraphiQL)

вот код страницы, над которой я сейчас работаю : 

import React from 'react'
import { graphql } from 'gatsby'
import Img from 'gatsby-image'

import Layout from '../components/Layout'
import './shop.scss'

const Shop = ({ data }) => {

    return (
        <Layout>
            <section>
              {data.allContentfulProducts.edges.map( ({ node }) => (
                <article key={node.id}>
                  <Img
                    fluid={node.images.fluid}
                  />
                  <p>{node.productName}</p>
                </article>
              ))}
            </section>
        </Layout>
    )
}

export const productQuery = graphql`
  query {
    allContentfulProducts {
      edges {
        node {
          id
          productName
          images {
            fluid {
              ...GatsbyContentfulFluid
            }
          }
        }
      }
    }
  }
`

export default Shop

1 Ответ

0 голосов
/ 05 февраля 2020

Я думаю, что есть проблема с вами graphQL Query. Попробуйте это: 

export const productQuery = graphql`
  query {
    allContentfulProducts {
      edges {
        node {
          id
          productName
          image {
            fluid {
              src
              ...GatsbyContentfulFluid
            }
          }
        }
      }
    }
  }
`

Если этот запрос не помогает, пожалуйста, покажите нам структуру ваших содержательных активов.

...