What is the purpose of the Image component in the gatsby-starter-default starter?

user_10792295 0
Viewed 693

I don't know if the image.js file in the components folder is supposed to take in arguments specifying things like fluid vs fixed, image size, which image should be rendered, etc, and then render any image according to the arguments.

If not, is the standard use of image.js to make a new file based on image.js for each image you want to display? If so, what is the benefit of this?

I read what I could find about image.js, but I still do not understand this issue.

image.js component: https://github.com/gatsbyjs/gatsby-starter-default/blob/master/src/components/image.js

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

/*
 * This component is built using `gatsby-image` to automatically serve optimized
 * images with lazy loading and reduced file sizes. The image is loaded using a
 * `StaticQuery`, which allows us to load the image from directly within this
 * component, rather than having to pass the image data down from pages.
 *
 * For more information, see the docs:
 * - `gatsby-image`: https://gatsby.dev/gatsby-image
 * - `StaticQuery`: https://gatsby.dev/staticquery
 */

const Image = () => (
  <StaticQuery
    query={graphql`
      query {
        placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
)
export default Image
gatsby
1 Answers

There's a few things going on here.

Firstly, this is just an example of a component with a static query. It just shows an example graphql query to pull in an image and render the image data. You'd likely call this from a parent component.

You could create such a component for each image, but you don't have to.

Using the example above, you cannot pass in parameters. I tried recently but the graphql interpolated string won't allow incoming params, but for this example there is a workaround as shown in this link posted by Wes Bos. In short, the work around is to use the graphql query to return every image and then use something like map to tease out the image of interest. Using this workaround, I managed to create a generic version of the example in your post in which I pass in the name of the image of interest. Though, clearly, not ideal if you have hundreds of images in your site.

You can pass params into graphql queries for a 'Page Component'. The Gatbsy tutorial (https://www.gatsbyjs.org/tutorial/) is excellent, I can't stress enough how worthwhile it would be to go through this whole tutorial. Parts four and five talk about graphql and working with queries and images.

When working with images, the suggested method is to use gatsby-image (https://www.gatsbyjs.org/packages/gatsby-image/), which the example uses.

I've also created another generic image component which accepts the image data, not the image name, as a prop. In the parent page component, I can define a constant graphql query and then pass the results of that into my image component. This approach could be extended to a page component which is an image gallery. E.g. the query could return all images in a folder or matching a reg-ex. The query requests can be iterated over to create an image component for each image by passing in the image data.

I've deliberately not included code examples as the links contains examples of all I have described above.

user_86339000
Related