我是使用 gatsby-image 的新手。
我从 gatsby/examples/using-gatsby-image/src/pages/ 获得了示例示例站点，它使用 gatsby develop 在本地工作。
接下来有两个步骤：
将 Img（和 graphql 查询）分离到另一个组件并从 blur-up.js 中调用该组件 - 为什么？因为 Img 和 graphql 很冗长，并且与我当前使用的样式组件（它是内联的）不匹配......并且它允许进行下一步（步骤 2）。
一旦它作为一个组件运行，那么父级可以向它传递一些简单的道具（文件名，大小）。这意味着任何时候你想要一个模糊的图像，你都可以把它放在父级中。
< ImageInsert fsfile="michae" maxwidth="800" />
并让组件使用（在本例中为 michae 作为图像文件名的正则表达式）处理 graphql 调用。
我的问题是我什至无法迈出第一步。
这就是我所做的
从父文件 (blur-up.js) 中删除 gatsby-image 引用并将导入添加到具有 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 标签 (Img) 和 graphql 查询。我尝试了各种选项（请参阅下面的未注释和注释）。但是当我这样做时，我得到一个空白页面（浏览器）和控制台错误，提示为空：
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) {