graphql - 使用 gatsbyjs GraphQL 查询特定文件夹中的所有图像
问题描述
我正在用 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
}
}
}
}
}
}
`;
解决方案
是否有可能缺少一些图像,所以没有渲染?
您可以尝试在渲染 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>
) })}
</>
)
推荐阅读
- java - 如何按优先级迭代?
- android - new NotificationCompat.Builder(Context) - 如何从 url 设置大图标()
- angular - 带有可选查询参数的角路由器
- wordpress - 我正在尝试在我的 wordpress 网站上摘录一条长评论
- sql - “带查询”与“临时表”性能明智
- r - 使用 Winsorize 函数在 R 中按列对数据进行 Winsorize
- apache-spark - 如何防止使用 Spark DataFrames 处理文件两次
- reactjs - 为什么不工作 react-quill getEditor of null
- php - 使用 PHP 将新节点添加到每个项目的 XML 中,并将变量作为属性
- php - 如何在 php post 表单中制作单独的电话号码?