如何使我的 Gatsby 站点可以从 Strapi 访问 Cloudinary 图像？

Question

我无法从 Strapi 为我的 Gatsby 站点访问 Cloudinary 图像。我执行以下操作...

将图像上传到 Cloudinary。
在 Strapi 媒体库中，单击“上传资产”按钮。
我选择“FROM URL”选项卡，粘贴 Cloudinary 图像 link，然后将其上传到 Strapi。
转到我的“帖子”Collection 输入 Strapi，然后从媒体库添加新图像，然后 save/publish post。
在 Gatsby (graphql) 中，我写了以下内容...

  query PostSearchQuery {
    allStrapiPost {
      edges {
        node {
          title
          subtitle
          slug
          id
          description
          image {
            localFile {
              childImageSharp {
                gatsbyImageData(
                  layout: FULL_WIDTH
                  placeholder: BLURRED
                  aspectRatio: 1.3
                )
              }
            }
          }
        }
      }
    }
  }

在 http://localhost:8000/___graphql 中，我运行它检查图像数据是否通过并得到这个...

            "image": [
              {
                "localFile": {
                  "childImageSharp": {
                    "gatsbyImageData": {
                      "layout": "fullWidth",
                      "placeholder": {
                        "fallback": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAQFAgP/xAAVAQEBAAAAAAAAAAAAAAAAAAADAv/aAAwDAQACEAMQAAAB7bkUCRkZAr//xAAbEAADAAIDAAAAAAAAAAAAAAABAgMAEgQRIf/aAAgBAQABBQKabZoezP1eRSYSyNMA5//EABURAQEAAAAAAAAAAAAAAAAAAAAS/9oACAEDAQE/AaU//8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERITH/2gAIAQIBAT8Bk6N6f//EABwQAAEEAwEAAAAAAAAAAAAAAAABAhExEBJBYf/aAAgBAQAGPwLw5iJk2VXNWiz/xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhMUFRcYH/2gAIAQEAAT8hoiOWnua93+y1UzHUeQEnPJcx5bH/2gAMAwEAAgADAAAAEIDf/8QAFxEBAQEBAAAAAAAAAAAAAAAAAREAIf/aAAgBAwEBPxBppzEm/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERQf/aAAgBAgEBPxC10OqM/8QAHBABAAMAAgMAAAAAAAAAAAAAAQARMSFRQXHw/9oACAEBAAE/ECpYHo6PqC4x2HWiXGFlVBol7SZKQJr9QxioVvjjwT//2Q=="
                      },
                      "images": {
                        "fallback": {
                          "src": "/static/86c19d070d79399eb57c60d31989e521/a3208/you_bible_rvveya_a96c049ce9.jpg",
                          "srcSet": "/static/86c19d070d79399eb57c60d31989e521/926c9/you_bible_rvveya_a96c049ce9.jpg 750w,\n/static/86c19d070d79399eb57c60d31989e521/4b650/you_bible_rvveya_a96c049ce9.jpg 1080w,\n/static/86c19d070d79399eb57c60d31989e521/4c7b3/you_bible_rvveya_a96c049ce9.jpg 1366w,\n/static/86c19d070d79399eb57c60d31989e521/a3208/you_bible_rvveya_a96c049ce9.jpg 1920w",
                          "sizes": "100vw"
                        },
                        "sources": [
                          {
                            "srcSet": "/static/86c19d070d79399eb57c60d31989e521/b1001/you_bible_rvveya_a96c049ce9.webp 750w,\n/static/86c19d070d79399eb57c60d31989e521/a6f88/you_bible_rvveya_a96c049ce9.webp 1080w,\n/static/86c19d070d79399eb57c60d31989e521/36c2a/you_bible_rvveya_a96c049ce9.webp 1366w,\n/static/86c19d070d79399eb57c60d31989e521/1d7d9/you_bible_rvveya_a96c049ce9.webp 1920w",
                            "type": "image/webp",
                            "sizes": "100vw"
                          }
                        ]
                      },
                      "width": 1,
                      "height": 0.7692708333333333
                    }
                  }
                }
              }
            ]

到目前为止一切都很好。该图像显示在 graphql 中。

但是当我尝试使用此显示图像时...

import React from "react"
import { Link } from "gatsby"
import PropTypes from "prop-types"

import Card from "~/components/styled/card"
import Image from "~/components/image"

const PostList = ({ posts, gridCols }) => {
  return (
    <div className={`grid ${gridCols} gap-6`}>
      {posts.map(post => {
        return (
          <Card key={post.id}>
            <Link to={`/posts/${post.slug}`} key={post.id}>
              <Image
                alt="Post Image"
                className="rounded-t-md border-gray-200  border-b"
                image={post.image}
              />
              <div className="px-4 py-6">
                <p>{post.title}</p>
                <p className="text-xs self-end">
                  {post.subtitle}
                </p>
              </div>
            </Link>
          </Card>
        )
      })}
    </div>
  )
}

PostList.propTypes = {
  posts: PropTypes.array,
  gridCols: PropTypes.string,
}

PostList.defaultProps = {
  gridCols: "grid-cols-1 md:grid-cols-3",
}

export default PostList

..这是 Image 组件...

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import PropTypes from "prop-types"

const Image = ({ image, className, alt }) => {
  const data = useStaticQuery(graphql`
    query {
      strapiGlobal {
        placeHolder {
          localFile {
            childImageSharp {
              gatsbyImageData(
                layout: FULL_WIDTH
                placeholder: BLURRED
                aspectRatio: 1.3
              )
            }
          }
        }
      }
    }
  `)

  if (!image) {
    return (
      <GatsbyImage
        className={className}
        image={getImage(data.strapiGlobal.placeHolder.localFile)}
        alt="Placeholder Image"
      />
    )
  }

  return (
    <GatsbyImage
      alt={alt}
      className={className}
      image={getImage(image.localFile)}
    />
  )
}

Image.propTypes = {
  image: PropTypes.object.isRequired,
  className: PropTypes.string,
  alt: PropTypes.string.isRequired,
}

export default Image

...出现空白。

不确定我在这里遗漏了什么。我在 gatsby develop 之前运行 gatsby clean，但图像仍然没有显示。

奇怪的是，在我的“产品”中 Collection 输入 Strapi，图像确实会显示出来。（那是在我用作该站点模板的原始 Gatsby 启动程序中。）。换句话说，当我添加新的 Collection 类型时，我的图像不会显示在 Gatsby 站点中。

如有任何帮助，我们将不胜感激。

Answer 1

我想问题出在您的 getImage 辅助函数中。您可以省略它并将您的组件保留为：

  return (
    <GatsbyImage
      alt={alt}
      className={className}
      image={image.localFile.childImageSharp.gatsbyImageData}
    />

因为 getImage 是一个可选的助手，它使用外部节点获取图像数据，在您的情况下，这应该可以工作。

如果没有，请检查获取 Image 组件的数据以发现任何泄漏。

Invalid prop 'image' of type 'array' supplied to 'Image', expected 'object'

感谢这个警告，并且由于数据结构：

 "image": [
              {
                "localFile": {
                  "childImageSharp": {
                    "gatsbyImageData": {
                      "layout": "fullWidth",
                      "placeholder": {
                        "fallback": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAQFAgP/xAAVAQEBAAAAAAAAAAAAAAAAAAADAv/aAAwDAQACEAMQAAAB7bkUCRkZAr//xAAbEAADAAIDAAAAAAAAAAAAAAABAgMAEgQRIf/aAAgBAQABBQKabZoezP1eRSYSyNMA5//EABURAQEAAAAAAAAAAAAAAAAAAAAS/9oACAEDAQE/AaU//8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERITH/2gAIAQIBAT8Bk6N6f//EABwQAAEEAwEAAAAAAAAAAAAAAAABAhExEBJBYf/aAAgBAQAGPwLw5iJk2VXNWiz/xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhMUFRcYH/2gAIAQEAAT8hoiOWnua93+y1UzHUeQEnPJcx5bH/2gAMAwEAAgADAAAAEIDf/8QAFxEBAQEBAAAAAAAAAAAAAAAAAREAIf/aAAgBAwEBPxBppzEm/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERQf/aAAgBAgEBPxC10OqM/8QAHBABAAMAAgMAAAAAAAAAAAAAAQARMSFRQXHw/9oACAEBAAE/ECpYHo6PqC4x2HWiXGFlVBol7SZKQJr9QxioVvjjwT//2Q=="
                      },
                      "images": {
                        "fallback": {
                          "src": "/static/86c19d070d79399eb57c60d31989e521/a3208/you_bible_rvveya_a96c049ce9.jpg",
                          "srcSet": "/static/86c19d070d79399eb57c60d31989e521/926c9/you_bible_rvveya_a96c049ce9.jpg 750w,\n/static/86c19d070d79399eb57c60d31989e521/4b650/you_bible_rvveya_a96c049ce9.jpg 1080w,\n/static/86c19d070d79399eb57c60d31989e521/4c7b3/you_bible_rvveya_a96c049ce9.jpg 1366w,\n/static/86c19d070d79399eb57c60d31989e521/a3208/you_bible_rvveya_a96c049ce9.jpg 1920w",
                          "sizes": "100vw"
                        },
                        "sources": [
                          {
                            "srcSet": "/static/86c19d070d79399eb57c60d31989e521/b1001/you_bible_rvveya_a96c049ce9.webp 750w,\n/static/86c19d070d79399eb57c60d31989e521/a6f88/you_bible_rvveya_a96c049ce9.webp 1080w,\n/static/86c19d070d79399eb57c60d31989e521/36c2a/you_bible_rvveya_a96c049ce9.webp 1366w,\n/static/86c19d070d79399eb57c60d31989e521/1d7d9/you_bible_rvveya_a96c049ce9.webp 1920w",
                            "type": "image/webp",
                            "sizes": "100vw"
                          }
                        ]
                      },
                      "width": 1,
                      "height": 0.7692708333333333
                    }
                  }
                }
              }
            ]

image 是一个对象数组，因此您应该传递第一个引用，例如：

  <Image
    alt="Post Image"
    className="rounded-t-md border-gray-200  border-b"
    image={post.image[0]}
  />

在问题范围之外，请记住，无论您是否传递图像，您的组件总是会触发 useStaticQuery 然后，当您选择是否渲染占位符图像时。就性能而言不是最佳的，因为您总是获取不必要的图像（如果您正在传递它）。

您可以创建一个虚拟变量来获取 props image 数据（如果存在）或来自 useStaticQuery 挂钩的数据。

如何使我的 Gatsby 站点可以从 Strapi 访问 Cloudinary 图像？

How can I make Cloudinary image accessible from Strapi for my Gatsby site?

cloudinary

strapi

gatsby