GatsbyImage 在本地提取数据但不使用 Strapi 和 Gatsby 时工作

Question

我正处于戒烟的边缘（再次!!）但坚持下去..

非常感谢对此的一些帮助，否则我的笔记本电脑可能 window 很快就会被扔掉！

我在本地建立了一个项目，现在将其链接到 Strapi 上的内容。我可以很好地从 Strapi 添加文本数据，但我真正苦苦挣扎的是 GatsbyImage 数据。

我收到此错误：

Warning: Failed prop type: The prop image is marked as required in GatsbyImage, but its value is undefined.

这是我的代码：

import React from "react";
import { SubTitle } from "../components/styles/Styles";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { graphql, useStaticQuery } from "gatsby";
import { ImageLayout } from "../components/styles/GridLayout";

// featured products on home page

const query = graphql`
  {
    allStrapiNewArrivals {
      nodes {
        images {
          localFile {
            childImageSharp {
              gatsbyImageData(
                placeholder: BLURRED
                layout: CONSTRAINED
                height: 400
                width: 400
              )
            }
          }
        }
      }
    }
  }
`;

const FeatureProducts = () => {
  const data = useStaticQuery(query);
  const nodes = data.allStrapiNewArrivals.nodes;
  console.log(nodes);
  return (
    <div>
      <SubTitle>New Arrivals</SubTitle>
      <ImageLayout>
        <div>
          <div className="collection-cards">
            {nodes.map((image, index) => {
              const pathToImage = getImage(image);
              return (
                <GatsbyImage
                  image={pathToImage}
                  alt=""
                  key={index}
                  className="collection"
                />
              );
            })}
          </div>
        </div>
      </ImageLayout>
    </div>
  );
};

export default FeatureProducts;

当我console.log（节点）它returns:

[{…}]
0:
images: Array(3)
0: {localFile: {…}}
1: {localFile: {…}}
2: {localFile: {…}}
length: 3
__proto__: Array(0)
__proto__: Object
length: 1
__proto__: Array(0)

我的想法 - 在 allStrapiNewArrivals 数据中，'images{ localFile ' 位可能是原因吗？因为在本地提取数据时没有列出这些。例如。它应该是：'file{childImageSharp'

我试过使用 'const nodes = data.allStrapiNewArrivals.nodes.images.localFile' 但这也引发了以下错误：

Cannot read property 'map' of undefined

还是.map函数中的getImage()？ - const pathToImage = getImage(image);

如果有人能提供帮助，我将不胜感激，我已经坚持了很长时间！

Answer 1

images 是一个图像数组，因此您也必须对其进行映射。也试试 gatsby clean

nodes.map((node, index) => {
  return node.images.map(image => {
    const pathToImage = getImage(image.localFile);
    return ( <
      GatsbyImage image = {
        pathToImage
      }
      alt = ""
      key = {
        index
      }
      className = "collection" /
      >
    );
  })
})

GatsbyImage 在本地提取数据但不使用 Strapi 和 Gatsby 时工作

GatsbyImage working when pulling data locally but not with Strapi and Gatsby

undefined

gatsby

gatsby-image

gatsby-plugin