Cannot display Img from gatsby-image

Question

I am trying to display an image using the Img from 'gatsby-image'. I am using graphql to pull the image data from the the src/images directory.

The query returns the data, and here is the console output :

file:
id: "f5c79f46-ac62-5305-9093-3087798d574f"
childImageSharp:
id: "60159a12-0e63-532a-b95a-9f2714358d00"
fluid:
base64: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAAAsSAAALEgHS3X78AAAEX0lEQVQ4y32Ue0zbVRTH2/76freUR/srtLRllI1Hy1gZbUFYgQnZ0pUOxkbBdqU8xpopyGPA5mvq1skyfGCYkb0CA8N0A0OCOphZND3C0f6HyRCzWNs/CSeDYTmYZzs0fdkXai/N8BXzpLioH3IY/9P+BlacvQ3uuAHuAAAAAElFTkSuQmCC"
aspectRatio: 1.187279151943463
src: "/static/59ab759908e0dac65e98b73407125e75/7b9fb/bitmoji.png"
srcSet: "/static/59ab759908e0dac65e98b73407125e75/e1953/bitmoji.png 250w,↵/static/59ab759908e0dac65e98b73407125e75/7b9fb/bitmoji.png 336w"
sizes: "(max-width: 336px) 100vw, 336px"

however the image is not rendering to the page. Here is the code for the component :

import { Link, graphql,useStaticQuery } from "gatsby";
import React, {useState,useEffect} from "react";
import './style.scss';
import bitmoji from '../images/bitmoji.png';
import Img from 'gatsby-image';

const Header = (props) => {
  const {siteTitle} = props;
  const imgQuery = useStaticQuery(graphql`
  query {
    file(relativePath: {eq : "bitmoji.png"}){
    childImageSharp {
      fluid(maxWidth : 1000) {
        ...GatsbyImageSharpFluid
      }
    }
  }
}`);

  return (
    <header className={scroll ? "nav scroll" : "nav"}>
        <div className="title">
          <Img fluid={imgQuery.file.childImageSharp.fluid}/>
          <Link to="/">{siteTitle}</Link> 
        </div>
    </header>
  )
}

Do you get any errors in the terminal or console? – ksav Mar 20 '20 at 06:20 — ksav, Mar 20 '20 at 06:20

score 0 · Answer 1 · answered Mar 20 '20 at 06:20

0

If I copy your component, replace bitmoji.png with gatsby-astronaut.png it seems to work as expected.

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

const Header = props => {
  const imgQuery = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "gatsby-astronaut.png" }) {
        childImageSharp {
          fluid(maxWidth: 1000) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return (
    <header>
      <div className="title">
        <Img fluid={imgQuery.file.childImageSharp.fluid} />
      </div>
    </header>
  )
}

export default Header

answered Mar 20 '20 at 06:20

ksav

20,015
6
46
66

I tried using gatsby-astronaut.png but still nothing shows up. ``` const queryData = useStaticQuery(graphql` query { file(relativePath: {eq : "gatsby-astronaut.png"}){ childImageSharp { fluid(maxWidth : 1000) { ...GatsbyImageSharpFluid } } } }`);``` – Amir Mar 20 '20 at 16:11
Just to be clear, if you copy the above solution into your own header component, does it work? – ksav Mar 20 '20 at 23:57
correct. The exact code does not render an image. I have already installed the required plugins as well: ``` plugins: [ `gatsby-plugin-react-helmet`, `gatsby-plugin-sass`, `gatsby-transformer-sharp`, `gatsby-plugin-sharp`, { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images`, }, }, – Amir Mar 21 '20 at 00:25
Let's chat https://chat.stackoverflow.com/rooms/210038/gatsby-image – ksav Mar 21 '20 at 00:31
Hey @ksav. I jumped into the chat, didn't hear from you. let me know when you're free to chat – Amir Mar 21 '20 at 16:05

Cannot display Img from gatsby-image

1 Answers1