你好gatsby-image

Question

我刚开始使用gatsby-image。

我从gatsby / examples / using-gatsby-image / src / pages /得到了示例示例站点，它使用gatsby develop在本地工作。

接下来有两个步骤：

将Img（和graphql查询）发送到另一个组件并从blur-up.js中调用该组件 - 为什么？因为Img和graphql很冗长，并且与我目前使用的样式组件（它的内联）相匹配......并且它允许进行下一步（步骤2）。
< / LI>
一旦它作为一个组件运行，那么父母可以传递一些简单的道具（文件名，大小）。这意味着，只要您想要一个模糊图像，就可以将其放在父图像中。

＆LT; ImageInsert fsfile =＆＃34; michae＆＃34; maxwidth =＆＃34; 800＆＃34; /＆GT;

让组件使用（在这种情况下michae作为imagefilename的正则表达式）来处理graphql调用。

我的问题是我甚至无法前进第一步。

这就是我的工作

从父文件中删除gatsby-image引用（blur-up.js）并将导入添加到具有gatsby-image（./ imageinsert）

import React from "react"
import ImageInsert from "./imageinsert"
import { rhythm, options } from "../utils/typography"

const BlurUp = () => (
  <div>
    <h1>Viribus quid</h1>
    <h2>Hippason sinu</h2>


    <p>
      Lorem markdownum nocens, est aut tergo, inmansuetique bella. Neve illud
      contrarius ad es prior.{` `}
      <a href="http://nunc.io/fuit.html">Planguntur</a> quondam, sua ferunt
      uterum semina advertere si fraudesque terram hosti subiecta, nec. Audenti
      refugitque manibusque aliis infelicem sed mihi aevis! Que ipso templa; tua
      triformis animumque ad coluit in aliquid.
    </p>
    <ul>
      <li>Infamia lumina sequuntur ulla</li>
      <li>Aquarum rutilos</li>
      <li>Hinc vimque</li>
    </ul>
    <h2>Et solebat pectus fletus erat furit officium</h2>
    <p>
      Proteus ut dis nec exsecrantia data: agrestes, truculenta Peleus. Et
      diffidunt, talia intravit Thaumantias; figere et <em>et</em> qui socio
      qui, <a href="http://vixmonet.io/in.html">tuo servet unda</a> hoc{` `}
      <strong>classi</strong>? Causam <em>quemque</em>? Subigebant cornibus
      fibras ut per nare nati, cunctis et <strong>illa verba</strong> inrita.
    </p>
    <ol>
      <li>Furori adacto</li>
      <li>Nocent imagine precari id ante sic</li>
      <li>Ipsos sine Iuno placabitis silet relinquent blandarum</li>
      <li>Et pars tabe sociorum et luna illum</li>
      <li>Et frustra pestifero et inquit cornua victa</li>
      <li>Constitit nomine senta suspirat et signis genuisse</li>
    </ol>

    <h2>Levia mihi</h2>
    <p>
      Precor Ortygiam, prudens diro stabant prodis moenia; aut tergo{` `}
      <a href="http://orehaec.io/">loquax et data</a> sua rite in vulnere. Esse
      lumina plaustrum lacus necopina, iam umbrae nec clipeo sentit{` `}
      <a href="http://ut.org/hinc">sinistra</a>.
    </p>
    <ImageInsert/>
    <p>
      Pendebat nitidum vidistis ecce crematisregia fera et lucemque crines.{` `}
      <a href="http://www.sub.net/">Est sopita satis</a> quod harena
      Antimachumque tulit fusile. Fieri qui que prosit equidem, meis praescia
      monebat cacumina tergo acerbo saepe nullaque.
    </p>
  </div>
)

export default BlurUp

现在添加imageinsert.js我从一些简单的东西开始（只需添加一个h1行）

它有效：

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

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

我的浏览器显示已插入：

你好gatsby-image

so far, so good, the component is inserted

所以我现在需要做的就是启用gatsby-image标签（Img）和graphql查询。我尝试了各种选项（请参阅下面的未注释和评论）。但是当我这样做时，我得到一个空白页面（浏览器）和控制台错误，提示为null：

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
//

对我来说没有用。每当我输入Img时，我都会得到一个空白页面。不幸的是，我无法访问任何其他示例。来自https://www.gatsbyjs.org/packages/gatsby-image/的例子有一个拼写错误@ - 一个（L）而不是（1）的宽度（它的l25而不是125）所以我不确定是否有人有我正在尝试的例子去做？或者建议如何将其纳入另一个组件。

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

Answer 1

这是不可能的。

在Gatsby中，您可以将数据提取到“页面”或“布局”组件中。

Gatsby将您的所有数据转换为静态数据并预取数据。因此，它必须确切地知道每页上需要什么数据。

Answer 2

有一种方法可以执行以下操作：使用一个组件加载 ALL 个现有图像，然后根据返回的数据进行过滤，仅提供所需的图像。

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

另一个StackOverflow答案中有一个代码示例：https://stackoverflow.com/a/56508865/179978

为gatsby-image创建反应组件（并传入文件名和大小的道具）

我的问题是我甚至无法前进第一步。

从父文件中删除gatsby-image引用（blur-up.js）并将导入添加到具有gatsby-image（./ imageinsert）

现在添加imageinsert.js我从一些简单的东西开始（只需添加一个h1行）

你好gatsby-image

2 个答案: