Gatsby: Image not showing in Navbar.Brand when using gatsby-image

[sp4rc]

Summary

I have a navigation.js component that contains a <Navbar>.

When using <img alt="Avatar" heigth="30" width="30" src={avatar} className="align-top d-inline-block rounded-circle mr-2" the image gets rendered proberly.

However when I use <Img fluid={data.file.childImageSharp.fluid} alt="Avatar" className="align-top d-inline-block rounded-circle mr-2" it doesn't.

It seems that d-inline-block is preventing the image from showing. Why is that and how can I fix it?

I would like to use the image avatar.jpg in other sizes on other pages as well, that's why I opted for gatsby-image here. Am I on the wrong track?

navigation.js

import React from "react"
import { Navbar, Nav } from "react-bootstrap"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
import avatar from "../images/avatar.jpg"

const Navigation = () => {
  const data = useStaticQuery(graphql`
    {
      file(
        sourceInstanceName: { eq: "images" }
        relativePath: { eq: "avatar.jpg" }
      ) {
        childImageSharp {
          fluid(maxWidth: 30, maxHeight: 30) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return (
    <Navbar variant="dark" expand="sm" className="bg-outer-space mb-3">
      <Navbar.Brand href="/" className="mx-auto">
        <Img
          fluid={data.file.childImageSharp.fluid}
          alt="Avatar"
          className="align-top d-inline-block rounded-circle mr-2"
        />
        {/* <img
            alt=""
            heigth="30"
            width="30"
            src={avatar}
            className="align-top d-inline-block rounded-circle mr-2"
          /> */}
        My blog
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="ml-auto">
          <Nav.Link href="/">Home</Nav.Link>
          <Nav.Link href="/about">About</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  )
}

export default Navigation

[sp4rc]

Nevermind. I figured it out by myself. I think it doesn't make sense to use fluid here and instead switch to fixed, which made it work.

Just for reference, the following worked:

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

const Navigation = () => {
  const data = useStaticQuery(graphql`
    {
      file(
        sourceInstanceName: { eq: "images" }
        relativePath: { eq: "avatar.jpg" }
      ) {
        childImageSharp {
          fixed(width: 30, height: 30) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `)

  return (
    <Navbar variant="dark" expand="sm" className="bg-outer-space mb-3">
      <Navbar.Brand href="/" className="mx-auto">
        <Img
          fixed={data.file.childImageSharp.fixed}
          alt="Avatar"
          className="align-top d-inline-block rounded-circle mr-2"
        />
        My blog
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="ml-auto">
          <Nav.Link href="/">Home</Nav.Link>
          <Nav.Link href="/about">About</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  )
}

export default Navigation

[tejassrivastava]

Thanks @sp4rc