I'm new to working with gatsby-image.
I've got the example sample site up from gatsby/examples/using-gatsby-image/src/pages/ and it works locally using gatsby develop.
There are two next steps:
Hive off Img (and graphql queries) to another component and call that component from within blur-up.js - why? Because Img and graphql is verbose and doesn't match my current use of styled-components (it's inline)... and it allows the next step to take place (step 2).
Once it's running as a component then the parent can pass some simple props to it (filename, size). This then means anytime you want a blur-up image you could put this in the parent.
< ImageInsert fsfile="michae" maxwidth="800" />
and let the component handle the graphql calls using (in this case michae as the regex for the imagefilename).
My problem is I can't even get step one going.
Here's what I do
REMOVE gatsby-image references from the parent file (blur-up.js) and ADD an import to a component that has the 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
NOW ADDING imageinsert.js I start with something simple (just add a h1 line)
and it works:
import React from "react"
import Img from "gatsby-image"
export default ({ data }) => (
<div>
<h1>Hello gatsby-image</h1>
</div>
)
my browser shows this inserted:
Hello gatsby-image
so far, so good, the component is inserted
So all I need to do now is enable the gatsby-image tag (Img) and graphql query. I try various options (see uncommented and commented below). But when I do this I get a blank page (browser) and console errors suggesting a null:
TypeError: Cannot read property 'file' of undefined
at new _default (imageinsert.js:7)
Here's some variations I tried:
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
//
None work for me. Anytime I put in the Img I get a blank page. Unfortunately I haven't got access to any other examples. The examples from https://www.gatsbyjs.org/packages/gatsby-image/ have a typo @ - an (L) instead of (1) for the width (it's l25 instead of 125) so I am not sure if anyone has examples of what i am trying to do? Or advice on how to get this into another component.
file(relativePath: { eq: "images/an-image.jpeg"}) {
childImageSharp {
resolutions(width: l25, height: 125) {
