gatsbyImageData missing fallback/source data, depending on image format

[claygiffin]

I am getting the following console error when I pull gatsbyImageData for non-jpg images:

react_devtools_backend.js:2557 Warning: Failed prop type: The prop `src` is marked as required in `J`, but its value is `undefined`.

Looking at gatsbyImageData queries for jpg vs non-jpg (tested .jpeg and .webp images) gave the following results:

JPG Output

"gatsbyImageData": {
    "images": {
        "sources": [],
        "fallback": {
            "src": "https://www.datocms-assets.com/example.jpg?auto=format&w=1264",
            "srcSet": "https://www.datocms-assets.com/example.jpg?auto=format&dpr=0.25&w=1264 316w,\nhttps://www.datocms-assets.com/example.jpg?auto=format&dpr=0.5&w=1264 632w,\nhttps://www.datocms-assets.com/example.jpg?auto=format&w=1264 1264w",
            "sizes": "(min-width: 1264px) 1264px, 100vw"
         }
    },
    "layout": "constrained",
    "placeholder": {
        "fallback": "data:image/jpg;base64,/example"
        },
    "width": 1264,
    "height": 843
    }
}

In this case, JPGs are missing their sources, and are relying on the fallback. When using the <GatsbyImage> component, this displays the image using <img src="..." srcset="..."> instead of <picture>

JPEG Output

"gatsbyImageData": {
  "images": {
    "sources": [
      {
        "srcSet": "https://www.datocms-assets.com/example.jpeg?auto=format&dpr=0.26&w=915 229w,\nhttps://www.datocms-assets.com/example.jpeg?auto=format&dpr=0.51&w=915 458w,\nhttps://www.datocms-assets.com/example.jpeg?auto=format&w=915 915w",
        "sizes": "(min-width: 915px) 915px, 100vw",
        "type": "image/jpeg"
      }
    ]
  },
  "layout": "constrained",
  "placeholder": {
    "fallback": "data:image/jpg;base64,/example"
  },
  "width": 915,
  "height": 1282
}

Now we have our source array, but it is missing the "src" entry, as well as the fallback. When using <GatsbyImage> component, this displays the image using <picture> as expected. However, the <img> element nested inside is missing its "src" attribute, giving us the reported error.

[stefanoverna]

Thanks for the details, we'll take a look at this shortly!

[stefanoverna]

Alright, we've released v2.6.14 which fixes the issue with JPEG images. It is correct that we only return a fallback without sources though, because we leverage the ?auto=format Imgix parameter that automatically returns webp when the browser supports it, so we don't need multiple sources and a picture tag.