0

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

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

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

1 回答 1

1

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

您可以尝试在渲染 Img 之前检查图像是否存在，如下所示：

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

注意：

如果您愿意，您还可以通过将映射对象（边）分配给变量来使其更清晰。在此示例中并没有太大的区别，但如果您的组件中有更多内容，则可能会更清楚。

例如

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>
      ) })}
  </>
    )
于 2020-02-26T22:45:41.257 回答