Process Images and Render them using GatsbyImage
GatsbyImage is a React component specially designed to give users a great image experience. It combines speed and best practices.
Install gatsby-transformer-sharp. Source image files from your post frontmatter, process them using gatsby-plugin-sharp and query them using gatsby-transformer-sharp. Then proceed to use the GatsbyImage component exported from gatsby-plugin-image to render the processed images.
Note: GatsbyImage is designed to support three different layouts, fixed: the image is not responsive, fullWidth: the image is designed to display the full width of the screen and will stretch beyond the size of its source if necessary, and constrained: a responsive image that will get larger and smaller depending on the screen size but will not get larger than the size of the source image (or width/height if either is passed).
Hi Laurie,
For those using Gatsby v3.0, the query seems to have changed a bit. Instead of "image" is "img": ... frontmatter { title img { ...
Hope this helps!
That's entirely dependent on your frontmatter key. So if you used img inside your frontmatter to point to a relative path, that's what you'd query for here. If you change it to image it should be the same as the example.
You are right, thank you for the clarification!