Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series

$

39

.99

$

32

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

Image Transformation & Manipulation In Gatsby

This video is about #7 Image Transformation & Manipulation In Gatsby - Pro Gatsby

Downloads

Become a pro to download code and videos

Comments

D.L.

about 2 years ago [edited]

Part of @Charlie's answer that wasn't showing up for me. " Img sizes="{data.background.childImageSharp.fluid}"" Thank you Charlie

Charlie

over 2 years ago

To make this work as of April 2020:

background: file(relativePath: { regex: "/bg.jpeg/" }) { childImageSharp { fluid(maxWidth: 1240) { ...GatsbyImageSharpFluid } } }

And

Andrew

about 3 years ago [edited]

@Yoli Scott, this continuously gives "Null" too. imageSharp(id: {regex: "/gatsby-astronaut.png/" }) { id }

Andrew

about 3 years ago

another link. This helps you with getting the graphql images. https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/?=gatsby-plugin-sharp

Andrew

about 3 years ago

Andrew

about 3 years ago [edited]

Yoli, I have the same issues. I think things may have changed since this tutorial was made. Here's a link that may help resolve your issues. https://github.com/gatsbyjs/gatsby/blob/master/examples/image-processing/src/pages/index.js

Yoli

over 3 years ago

have followed step by step several times and I'm still getting this error Cannot read property 'sizes' of undefined

Is there an update that we should be aware of

Want to join the conversation?

Become a Pro member today!