Gatsby 为盖茨比图像创建react组件（并传递文件名和大小的道具）

我刚接触盖茨比形象公司

我从gatsby/examples/使用gatsby image/src/pages/获得了示例示例站点，它使用gatsby develope在本地工作

接下来有两个步骤：

将Img（和graphql查询）分离到另一个组件，并从blur-up.js中调用该组件-为什么？因为Img和graphql是冗长的，并且与我当前使用的样式化组件（它是内联的）不匹配。。。它允许进行下一步（步骤2）

一旦它作为一个组件运行，那么父级可以向它传递一些简单的道具（文件名、大小）。这意味着任何时候你想要一个模糊的图像，你可以把它放在家长

< ImageInsert fsfile=“michae”maxwidth=“800”/>

并让组件使用（在本例中，michae作为imagefilename的正则表达式）处理graphql调用

我的问题是我连第一步都做不到。 我就是这么做的

从父文件（blur up.js）中删除盖茨比图像引用，并向具有盖茨比图像的组件添加导入（./imageinsert） 以下是我尝试过的一些变体：

import React from "react"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img resolutions={data.file.childImageSharp.resolutions} />
  </div>
)

// export const query = graphql`
//     query ImageInsertQuery {
//       imageSharp(id: { regex: "/nasa/" }) {
//       sizes(maxWidth: 1500) {
//         ...GatsbyImageSharpSizes
//       }
//     }
//   }
// `


export const query = graphql`
  query GatsbyImageSampleQuery {
    file(relativePath: { eq: "images/nasa-45072.jpg"}) {
      childImageSharp {
        resolutions(width: 125, height: 125) {
          ...GatsbyImageSharpResolutions
        }
      }
    }
  }
`




// class ImageInsert extends React.Component {
//   render() {
//     return (
//       <div>
//         {/* <Img
//         title={`Photo of Michael`}
//           sizes={this.props.data.imageSharp.sizes}
//         /> */}
//         <h1>mg is here </h1>
//       </div>
//     )
//   }
// }
//
// export default ImageInsert
//
// export const query = graphql`
//     query ImageInsertQuery {
//       imageSharp(id: { regex: "/nasa/" }) {
//       sizes(maxWidth: 1500) {
//         ...GatsbyImageSharpSizes
//       }
//     }
//   }
// `
//


// const ImageInsert = ({ data }) => (
//   <div>
//     <h1>yayness {data.mgImage.sizes}</h1>
//     {/* <Img
//       sizes={data.mgImage.sizes}
//       title={`Photo of Michael`}
//     /> */}
//   </div>
// )
//
// export default ImageInsert
//

这是不可能的

在盖茨比中，您只能将数据拉入“页面”或“布局”组件中

盖茨比将所有数据转换为静态数据并预取数据。因此，它必须准确地知道每页需要哪些数据。

这是不可能的

在盖茨比中，您只能将数据拉入“页面”或“布局”组件中

---

盖茨比将所有数据转换为静态数据并预取数据。因此，它必须准确地知道每个页面上需要哪些数据。

有一种方法可以做到这一点：使用组件加载所有存在的图像，然后根据返回的数据进行过滤，只提供所需的图像

然后，所有图像都需要相同的设置，并且它们都将被渲染到该设置。但对于某些用例来说，这是可以接受的。非常有趣

---

另一个StackOverflow答案中有一个代码示例：

有一种方法可以这样做：使用组件加载所有存在的图像，然后根据返回的数据进行过滤，只提供所需的图像

然后，所有图像都需要相同的设置，并且它们都将被渲染到该设置。但对于某些用例来说，这是可以接受的。非常有趣

---

在另一个StackOverflow答案中有一个代码示例：

但是如果不为每个要使用的图像使用5-6-7行，是否真的没有办法将图像包含在

gatsby image

中？这是一个相当大的锅炉板负荷。应该有一种静态定义它的方法，并得到一个很好的API，就像建议的那样，一个用于导入不同图像（具有相同设置）的一行代码。但是，如果不为每个要使用的图像使用5-6-7行，是否真的无法包含带有

gatsby image

的图像？这是一个相当大的锅炉板负荷。应该有一种方法可以静态地定义它，并获得一个很好的API，就像建议的那样，一个用于导入不同图像（具有相同设置）的一行程序。

import React from "react"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
  </div>
)

TypeError: Cannot read property 'file' of undefined
    at new _default (imageinsert.js:7)

import React from "react"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img resolutions={data.file.childImageSharp.resolutions} />
  </div>
)

// export const query = graphql`
//     query ImageInsertQuery {
//       imageSharp(id: { regex: "/nasa/" }) {
//       sizes(maxWidth: 1500) {
//         ...GatsbyImageSharpSizes
//       }
//     }
//   }
// `


export const query = graphql`
  query GatsbyImageSampleQuery {
    file(relativePath: { eq: "images/nasa-45072.jpg"}) {
      childImageSharp {
        resolutions(width: 125, height: 125) {
          ...GatsbyImageSharpResolutions
        }
      }
    }
  }
`




// class ImageInsert extends React.Component {
//   render() {
//     return (
//       <div>
//         {/* <Img
//         title={`Photo of Michael`}
//           sizes={this.props.data.imageSharp.sizes}
//         /> */}
//         <h1>mg is here </h1>
//       </div>
//     )
//   }
// }
//
// export default ImageInsert
//
// export const query = graphql`
//     query ImageInsertQuery {
//       imageSharp(id: { regex: "/nasa/" }) {
//       sizes(maxWidth: 1500) {
//         ...GatsbyImageSharpSizes
//       }
//     }
//   }
// `
//


// const ImageInsert = ({ data }) => (
//   <div>
//     <h1>yayness {data.mgImage.sizes}</h1>
//     {/* <Img
//       sizes={data.mgImage.sizes}
//       title={`Photo of Michael`}
//     /> */}
//   </div>
// )
//
// export default ImageInsert
//

file(relativePath: { eq: "images/an-image.jpeg"}) {
      childImageSharp {
        resolutions(width: l25, height: 125) {