Запрос всех изображений в указанной папке c с помощью gatsby js GraphQL - PullRequest
Новая
       42

Запрос всех изображений в указанной папке c с помощью gatsby js GraphQL

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

Я создаю свой сайт с Гэтсби JS и графиком sql. На моем сайте проектов я хочу отобразить сетку с изображениями, которые ссылаются на другие сайты.

Для этого мне нужно запросить несколько изображений. Я создал папку в папке с изображениями, которая называется «портфолио», и я хочу запросить все изображения в ней.

Ранее я использовал useStaticQuery, но я прочитал, что в настоящее время можно запросить только один экземпляр, поэтому я попытался сделать это так, но код не работает. Любая помощь? Большое спасибо! 

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

const Portfolio = ({data}) => (
 <>
{data.allFile.edges.map(image => {
  return (
    <div className="sec">
     <div className="portfolio">
        <div className="containerp">
           <Img className="centeredp" fluid={image.node.childImageSharp.fluid}/>
       </div>
     </div>
   </div>
      ) })}
  </>
    )


export default Portfolio

export const portfolioQuery = graphql`
{
  allFile(filter: {relativeDirectory: {eq: "portfolio"}}) {
    edges {
      node {
        id
        childImageSharp {
          fluid(maxWidth: 500) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}
`;

1 Ответ

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

Возможно ли, что у вас отсутствуют некоторые изображения, поэтому ни одно не рендерится?

Вы можете попробовать проверить, присутствует ли изображение перед рендерингом Img, например: 

{image.node.childImageSharp && 
          <Img className="centeredp" fluid={image.node.childImageSharp.fluid}/>}

NB:

Если хотите, вы также можете сделать это немного яснее, назначив свой объект отображения (ребра) переменной. Это не имеет большого значения в этом примере, но может быть более понятным, если в вашем компоненте больше работы.

Например: 

const Portfolio = ({data}) => (
 <>
const images = data.allFile.edges

{images.map(image => {
  return (
    <div className="sec">
     <div className="portfolio">
        <div className="containerp">
           <Img className="centeredp" fluid={image.node.childImageSharp.fluid}/>
       </div>
     </div>
   </div>
      ) })}
  </>
    )
...