我对盖茨比和Graphql还是新手,正在尝试学习使用Gatsby transformer sharp、Gatsby plugin sharp和Gatsby 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".这取决于您要查询的节点:
gatsby source contentful
{ 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
gatsby Source contentful
只要你的GraphQL包含gatsbyImage和gatsbyImageData就意味着变形金刚(gatsby transformer sharp)和锐器(gatsby plugin sharp)正在做他们的工作.
gatsbyImage
gatsbyImageData
gatsby transformer sharp
gatsby plugin sharp
您的查询将取决于您的数据结构,请查看教程以更好地理解,请记住您的数据将在props.data下.页面的allContentfulCarousel,但看起来Images是一个图像数组,因此您需要通过它进行另一个循环,以呈现传递每个图像的GatsbyImage`组件.
props.data下.页面的allContentfulCarousel,但看起来
是一个图像数组,因此您需要通过它进行另一个循环,以呈现传递每个图像的
这取决于何时完成或录制这些教程.盖茨比形象自创作以来经历了许多突破性的变化(见[migration Gatsby 2 to 3])(https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/))从`盖茨比图像`更改为`盖茨比插件图像`.
正如你在[
gatsby source contentful
docs]中看到的那样(https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/)你并不总是需要"childImageSharp".这取决于您要查询的节点:来源:
gatsby Source contentful
docs只要你的GraphQL包含
gatsbyImage
和gatsbyImageData
就意味着变形金刚(gatsby transformer sharp
)和锐器(gatsby plugin sharp
)正在做他们的工作.您的查询将取决于您的数据结构,请查看教程以更好地理解,请记住您的数据将在
props.data下.页面的allContentfulCarousel,但看起来
Images是一个图像数组,因此您需要通过它进行另一个循环,以呈现传递每个图像的
GatsbyImage`组件.