当前位置:优学网  >  在线题库

从Contentful检索图像-在graphql操场上看不到儿童图像锐利

发表时间:2022-07-29 00:48:00 阅读:134

我对盖茨比和Graphql还是新手,正在尝试学习使用Gatsby transformer sharpGatsby plugin sharpGatsby plugin image从Contentful中使用Graphql检索图像并映射这些图像的教程.在我阅读和观看的所有教程中,他们可以在操场上选择"儿童形象锐利",而我没有.

这就是graphql的样子

这就是我的插件的样子

有人能帮助或引导我了解查询的外观以及如何映射查询中的数据以检索这些图像吗?

非常感谢!

🎖️ 优质答案
  • 这取决于何时完成或录制这些教程.盖茨比形象自创作以来经历了许多突破性的变化(见[migration Gatsby 2 to 3])(https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/))从`盖茨比图像`更改为`盖茨比插件图像`.

    正如你在[gatsby source contentfuldocs]中看到的那样(https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/)你并不总是需要"childImageSharp".这取决于您要查询的节点:

    {
      allContentfulCaseStudy {
        edges {
          node {
            id
            slug
            title
            subtitle
            body {
              body
            }
            heroImage {
              title
              description
              gatsbyImageData(layout: CONSTRAINED)
              # Further below in this doc you can learn how to use these response images
            }
          }
        }
      }
    }
    

    来源:gatsby Source contentfuldocs

    只要你的GraphQL包含gatsbyImagegatsbyImageData就意味着变形金刚(gatsby transformer sharp)和锐器(gatsby plugin sharp)正在做他们的工作.

    您的查询将取决于您的数据结构,请查看教程以更好地理解,请记住您的数据将在props.data下.页面的allContentfulCarousel,但看起来Images是一个图像数组,因此您需要通过它进行另一个循环,以呈现传递每个图像的GatsbyImage`组件.

  • 相关问题