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

Posted 2023-03-08

【中文标题】为 gatsby-image 创建一个反应组件（并传入文件名和大小的道具）

【英文标题】：Creating a react component for gatsby-image (and passing in props of filenames and sizes)

【发布时间】：2018-03-29 06:31:06

【问题描述】：

我是使用 gatsby-image 的新手。

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

接下来有两个步骤：

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

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

并让组件使用（在本例中 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>
)

我的浏览器显示这个插入：

你好盖茨比图片

so far, so good, the component is inserted

所以我现在需要做的就是启用 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) 

【参考方案1】：

这是不可能的。

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

Gatsby 将您的所有数据转换为静态数据并预取数据。所以它必须准确地知道每个页面需要哪些数据。

【讨论】：

但是真的没有办法在不使用 5-6-7 行的情况下使用 gatsby-image 包含您要使用的每个图像的图像吗？那是相当大的样板负载。应该有一种方法来静态定义它并获得一个像建议的那样好的 API，一个用于导入不同图像（具有相同设置）的单行。

【参考方案2】：

有一种方法可以做这样的事情：使用一个组件来加载 ALL 存在的图像，然后根据您返回的数据进行过滤以仅提供您想要的图像。 p>

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

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