多图像，无法从数组中获得第一个图像

发布于 2025-01-30 05:05:33 字数 1569 浏览 2 评论 0原文

我有一个连接到Strapi后端的Gatsby应用程序。
在我的主页上，我想从画廊显示所有项目及其第一张图片。

我的查询看起来像这样：

        allStrapiProject {
          edges {
            node {
              title
              gallery{
                localFile{
                  publicURL
                  childImageSharp {
                    gatsbyImageData(
                      placeholder: BLURRED
                      formats: [AUTO, WEBP, AVIF]
                      layout: FULL_WIDTH
                    )
                  }
                }
              }
            }
          }
        }

我的index.js看起来像这样

    <Layout>
      <div id="projects" className="featured-grid">
        {data.allStrapiProject.edges.map(({node: project}) => {
          const image = getImage(project.gallery[0].localFile);
          return (
            <div>
              <p>{project.title}</p>
              <GatsbyImage image={image} />
            </div>
          )
        })}
      </div>
    </Layout>

，我得到的错误

Error in function eval in ./src/pages/index.js:18
Cannot read properties of null (reading '0')

似乎并没有让我从数组中获得第一个值。另外，当我做console.log（project.gallery）时，我可以看到所有数组，但是当我尝试console.log（project.gallery [0]）时，我会遇到相同的错误。

有什么想法吗？

编辑* console.log（project.gallery）

原文

I have a gatsby app which is connected to a Strapi backend.
On my homepage i want to display all projects and their first image from the gallery.

My query looks like this:

        allStrapiProject {
          edges {
            node {
              title
              gallery{
                localFile{
                  publicURL
                  childImageSharp {
                    gatsbyImageData(
                      placeholder: BLURRED
                      formats: [AUTO, WEBP, AVIF]
                      layout: FULL_WIDTH
                    )
                  }
                }
              }
            }
          }
        }

my index.js looks like this

    <Layout>
      <div id="projects" className="featured-grid">
        {data.allStrapiProject.edges.map(({node: project}) => {
          const image = getImage(project.gallery[0].localFile);
          return (
            <div>
              <p>{project.title}</p>
              <GatsbyImage image={image} />
            </div>
          )
        })}
      </div>
    </Layout>

and i get this error

Error in function eval in ./src/pages/index.js:18
Cannot read properties of null (reading '0')

seems like its not letting me get the first value from the array.
also when i do console.log(project.gallery) i can see all the arrays, but when i try to console.log(project.gallery[0]) i get the same error.

Any ideas ?

Edit*
console.log(project.gallery)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

潇烟暮雨 2025-02-06 05:05:34

解决方案是：

{
  project.category.name === "Photo" && (
    <GatsbyImage
      image={getImage(project.gallery[0].localFile)}
      alt="asdasdasd"
      className=""
    />
  );
}

问题是某些类别不包含Gallery节点，因此该方法应仅适用于photo

The resolution has been:

{
  project.category.name === "Photo" && (
    <GatsbyImage
      image={getImage(project.gallery[0].localFile)}
      alt="asdasdasd"
      className=""
    />
  );
}

The problem was that some categories don't contain gallery node so the approach should only apply to Photo

回复收藏 0 原文

~没有更多了~