Как запросить несколько изображений из массива с помощью gatsby-image? - PullRequest
Новая
       45

Как запросить несколько изображений из массива с помощью gatsby-image?

0 голосов
/ 06 июля 2019

У меня есть коллекция работ, которые доступны через конечную точку API Strapi.Каждая работа имеет массив, содержащий несколько изображений.Я хотел бы отобразить их, используя gatsby-image, но я понятия не имею, как это сделать, поскольку все доступные примеры на документах сделаны с отдельными файлами или статическими файлами в папке «images».

Когда я пытался использовать GraphiQL Explorer, я понял, что уменьшенное изображение имеет это значение для клавиши 'id': 

"thumbnail": {
          "id": "e:/wamp/www/@flaex_/app/.cache/gatsby-source-filesystem/52e3542d00600c96e52cb584e83c2cae.jpg absPath of file"}

Это означает, что изображение было зарегистрировано в кэше gatsby.С другой стороны, ключ 'id' на каждом изображении массива показывает это: 

"images": [
          {
            "id": "5d0d7429fe6de132d43a44b4",
            "url": "/uploads/01d8a893fe4c46738b1c99624d22154d.jpg"
          },
          {
            "id": "5d0d7429fe6de132d43a44b3",
            "url": "/uploads/eb399dfadea74b9db39672a1f98575ff.jpg"
          }
        ]

Есть ли что-то, что мне здесь не хватает?

Это шаблон, который я использую: 

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
import containerStyles from "../pages/portfolio.module.less"

const WorkTemplate = ({ data }) => (
  <Layout>
    <div className={containerStyles.navsec}>
      <button onClick={() => window.history.back()}>&#60;&#60; back</button>
    </div>
    <article>
      <h1>{data.strapiWork.title}</h1>      
      <Img fluid={data.strapiWork.thumbnail.childImageSharp.fluid} />
      <p>{data.strapiWork.description}</p>
      {console.log(data.strapiWork.images)}      
      <ul className={containerStyles.works}>
          {data.allStrapiWork.images.map(document => (
            <li key={document.id}>              
               <Img fluid={document.image.childImageSharp.fluid} />

            </li>
          ))}
        </ul>       
    </article>
  </Layout>
)

export default WorkTemplate

export const query = graphql`
  query WorkTemplate($id: String!) {
    strapiWork(id: { eq: $id }) {
      id
      title
      description
      images {        
        childImageSharp {
          fluid(maxWidth: 120) {
            ...GatsbyImageSharpFluid
          }
        }       
      }
      thumbnail {
        childImageSharp {
          fluid(maxWidth: 500) {
            ...GatsbyImageSharpFluid
          }
        }
      }      
    }
  }
`

Я предполагаю, что это не работает, потому что 'images' - это массив.

Миниатюрное изображение отрисовывается нормально, как можно видеть, я пытался повторить используемый запрос graphQLна миниатюре изображения, но я получаю это сообщение на консоли при запуске gatsby develop:

ошибка GraphQL Error Encountered 1 error (s): - Неизвестное поле 'childImageSharp' для типа '[StrapiWorkImages]'.

Буду признателен за любую помощь в этом отношении.Спасибо!

1 Ответ

0 голосов
/ 08 июля 2019

Я посмотрел репозиторий Gatsby (на плагине gatsby-source-strapi), и кажется, что это открытый вопрос на данный момент. Так что это совсем не то, что вы делаете неправильно. Не уверен, поможет ли это вообще? Я думаю, что для некоторых это не так. Обходное решение для изображения

...