Gatsby-plugin-image empty sources array

Developing with Prismic
1

I just recently noticed that when I look at GraphiQL, the gatsbyImageData returns an empty sources array:

{
  "data": {
    "prismicTool": {
      "data": {
        "tool_logo": {
          "gatsbyImageData": {
            "images": {
              "sources": [],
              "fallback": {
                "src": "https://images.prismic.io/...
}

Notice the "sources": [ empty array] ??? The fallback property has plenty of URLs. I'm not sure what happened.

I'm using (yarn list | grep prismic) :

 @prismicio/client@6.1.0
│  ├─ @prismicio/helpers@^2.0.0
│  └─ @prismicio/types@^0.1.21
├─ @prismicio/custom-types-client@0.0.6
├─ @prismicio/helpers@2.0.0
│  ├─ @prismicio/richtext@^2.0.0-beta.3
│  ├─ @prismicio/richtext@2.0.0
│  │  └─ @prismicio/types@^0.1.19
│  ├─ @prismicio/types@^0.1.20
├─ @prismicio/react@2.2.0
│  ├─ @prismicio/helpers@^2.2.1
│  ├─ @prismicio/helpers@2.2.1
│  │  ├─ @prismicio/richtext@^2.0.1
│  │  ├─ @prismicio/types@^0.1.27
│  ├─ @prismicio/richtext@^2.0.1
│  └─ @prismicio/types@0.1.27
├─ @prismicio/richtext@2.0.1
│  ├─ @prismicio/types@^0.1.22
│  └─ @prismicio/types@0.1.27
├─ @prismicio/types@0.1.21
├─ gatsby-source-prismic@5.2.5
│  ├─ @prismicio/client@^6.0.0-beta.2
│  ├─ @prismicio/custom-types-client@^0.0.6
│  ├─ @prismicio/helpers@^2.0.0-beta.0
│  ├─ @prismicio/types@^0.1.13
├─ prismic-helpers@1.0.3
├─ prismic-reactjs@1.3.4
│  ├─ prismic-helpers@^1.0.3
│  ├─ prismic-richtext@^1.0.3
├─ prismic-richtext@1.0.3
2

I just checked this using a fresh gatsby-starter-hello-world and a different Prismic repository. I am still getting empty gatsbyImageData -> sources array. Will now test with a fresh/new prismic repo.

3

Confirmed that with a new repository created 4.3.22, gatsbyImageData returns empty sources array. :thinking:

4

Hey @edtech, thanks for letting us know about this. I'll inform the relevant team.

6

Thank you for letting me know you're pushing this to the right team. Can I assume that this means you are seeing the same "behavior" as well?

7

Hello @edtech, we were looking for more information to give you an appropriate answer. The Devx team explains how the sources field works. It contains data used in <img> or <source> HTML elements ( <source> would be used in <picture> ). This includes attributes like srcSet , sizes , and type . <GatsbyImage> will take these sources and output the correct HTML.

gatsby-source-prismic uses @imgix/gatsby, which does not populate sources (at least not in most cases). Instead, it populates a fallback property. It contains similar data to sources. For Prismic and Imgix, only using fallback is not a problem since there will always only be one image.

We hope this helps.