CODEWITHSUNDEEP
gatsbygatsby-image
Pegasus18
Pegasus18

Reputation: 300

Gatsby Img not rendering

I am trying to load a picture using the Gatsby Img component on the following page:

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
import SEO from "../components/seo"
import FeatureCard from "../components/featureCard"
import { getImage } from "../utils/getImage"

function IndexPage() {
  const data = useStaticQuery(graphql`
      query {
          file(relativePath: { eq: "index/profile.JPG" }) {
              childImageSharp {
                  fluid {
                      ...GatsbyImageSharpFluid
                  }
              }
          }
      }
  `)

  console.log(data.file.childImageSharp.fluid);


  const featureCardContainer =
    "flex justify-center w-full my-2 md:px-2 lg:my-4 lg:px-4 lg:w-full xl:w-1/2"

  return (
    <Layout>

      <div className="w-full h-auto flex flex-col justify-center items-center">

        <h1 className="text-2xl">Testing</h1>
        <Img fluid={data.file.childImageSharp.fluid} alt={'Profile Picture'} />

      </div>
    </Layout>
  )
}

export default IndexPage

The Img component isn't rendering and I can't figure out why. I have logged the graphql query and it is indeed fetching the correct GatsbyImageSharpFluid object.

Logs

Console log

Am I missing something really obvious?

I have Gatsby-image working on other parts of the site so it is not a problem with the config.

Upvotes: 2

Views: 2108

Answers (1)

EliteRaceElephant
EliteRaceElephant

Reputation: 8162

Your parent component is a flexbox. It may be that you have to specify a height and width to image components: Add style={{height: "100px", width: "100px"}} to Img in order to see it.

Explanation:

A flexbox container with its default grow and shrink values expands to the minimal size to show its children components. Because the default minimum size of the Gatsby-Image component is not set, it is implicitly set to 0. That's why you do not see anything but your developers tools will still show the HTML node.

By declaring the width and height you set a minimum size you can see in the browser.

Upvotes: 2

Related Questions