Gatsby Image issue

JavaScript
1

Hey guys, Really new at Gatsby.

I can’t figure out why image is not being displayed although it should be there.

I did correctly query for this image but it’s 0 x 0 pixels.

image
image1449×697 37.5 KB

Here is live demo. https://bts-quotes.netlify.com/
source code. https://github.com/shimphillip/bts-quotes/blob/master/src/components/Picture/Picture.js

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

const Picture = () => (
  <StaticQuery
    query={graphql`
      query {
        fileName: file(relativePath: { eq: "jhope1.jpg" }) {
          childImageSharp {
            fluid(maxWidth: 1000) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => {
      console.log(data.fileName.childImageSharp.fluid)
      return (
        <PictureWrapper>
          <Img fluid={data.fileName.childImageSharp.fluid} />
        </PictureWrapper>
      )
    }}
  />
)

export default Picture

const PictureWrapper = styled.div`
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
`
2

images using the fluid type are stretched to match the container’s width

My uneducated guess would be that Img is stretched to match PictureWrapper width, which is 0 :thinking:

1 Like
3

Hm, nice try but PictureWrapper is already taking up half space.

It’s so weird, it says the image’s intrinsic size is 20 X 13 too…

4

Yeah, I see.
In dev tools you can see that "gatsby-image-wrapper" has no width (adding manually makes the image appear), so it has something to do with Gatsby.

1 Like
5

Thanks that leads to something!

Now I have to find out what about Gatsby configuration that I need to fix.

6

It looks like it has style parameter. Try to pass {width: '100%'} to it;

7

Thanks jenovs!

Any idea why the official doc doesn’t pass in style parameter?

8

No idea. Never used Gatsby :slight_smile:

10

It does, thanks Randell :slight_smile: