Question

我正在使用GatsbyJS和graphsql构建我的网站。在我的项目站点上，我想显示一个带有链接到其他站点的图像的网格。

为此，我需要查询多个图像。我在图片文件夹中创建了一个名为“作品集”的文件夹，我想查询其中的所有图片。

我以前使用过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
          }
        }
      }
    }
  }
}
`;

Answer 1

是否有可能缺少一些图像，所以没有渲染？

您可以尝试在渲染图像之前检查图像是否存在，像这样：

{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>
      ) })}
  </>
    )

使用gatsbyjs GraphQL查询特定文件夹中的所有图像

1 个答案: