gatsby: gatsby-image fluid expects aspectRatio to exist, fails silently(image does not display)

Description

gatsby-image fails to work correctly with fluid image if no aspectRatio value is provided due to the calculation expecting it for fluid images and returning NaN instead.

Steps to reproduce

I have used gatsby-image with gatsby-source-contentful and a graphql query like the following:

const QueryPageService = graphql`
  query QueryPageService {
    contentfulPageService {
      services {
          media {
            file { url }
            fluid(maxWidth: 500){
              sizes
              src
              srcSet
              srcWebp
              srcSetWebp
              # Below as an alternative will also retrieve aspectRatio
              #...GatsbyContentfulFluid_withWebp
            }
          }
      }
    }
  }
`

The query works fine and provides all data. I referenced the examples from the gatsby/contentful demo: https://using-contentful.netlify.com/image-api/ (also hosted at https://using-contentful.gatsbyjs.org/image-api/ ). The fragment will return the aspectRatio and thus not run into this issue, it was not in the examples I came across and I wasn’t aware that it works even if it does not in GraphiQL

The examples there for fluid do not show the aspectRatio field being queried.(Nor the fragment, tracedSVG has the fragment, but is outdated, despite the repo using v2 of Gatsby in package.json, ...GatsbyContentfulSizes_tracedSVG is from v1.

When used in my project the images failed to display correctly due to CSS. While I could change the CSS via the Img component props to correct this, it turned out that in gatsby develop there was a padding-bottom CSS property being set on the components wrapper first child div, but the value was invalid, and thus omitted. In gatsby build this CSS property is included but with a value of NaN%(Where I noticed breakage with my alternative CSS fix).

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/src/index.js#L271

 paddingBottom: `${100 / image.aspectRatio}%`,

Additional context if unable to reproduce: My project using this has the image contained a flexbox item parent, and another a carousel component that uses relative positioning. Neither seem to be affected ensuring an aspectRatio value is provided.

Expected result

This expects aspectRatio to exist, a default should be provided or raise a compile error.

The contentful demo repo should also point out it relies on aspectRatio to work correctly and/or mention the contentful fluid fragment. The tracedSVG example should also be updated to use the correct v2 fragment.

Actual result

In gatsby develop there was a padding-bottom CSS property being set on the components wrapper first child div, but the value was invalid, and thus omitted.

In gatsby build this CSS property is included but with a value of NaN%

Environment

gatsby info has no output, gatsby -v returns 2.0.75. It’s running in a custom docker container(Alpine 3.8 base, NodeJS 10).