Querying localFile on images from Prismic returns null

Developing with Prismic
1

I'm trying to get localFile field from Prismic so I could use it with GatsbyImage, but it returns null.

Image showing query and its result:

image
image959×584 18.7 KB

Any clue what I might be doing wrong?

gatsby-config.js:
image

2

Hello @Jere, thanks for reaching out!

Seems like you're missing to add these plugins:

And the plugin configuration of the source plugin requires the shouldDownloadFiles option.

// Example gatsby-config.js file

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-prismic',
      options: {
        // Alongside your other options...
        shouldDownloadFiles: {
          // Download a Page `photo` image:
          'page.data.photo': true,
        },
      },
    },
    'gatsby-plugin-image',
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
  ],
}

Learn more in our dedicated docs:

4

Hello team. We close the threads after a week with no new activity. If this happens and you want to continue the conversation, you can easily flag it to reopen it and add a new comment.
Thanks.

5

Ah I got it working! I did have the plugins, but missed shouldDownloadFiles. The documentation for it is a bit confusing, at first I didn't understand what page.data.photo was.

Is there any way to automatically download all the image files for local processing? The list could get long with many slices.

6

I don't believe you can retrieve all the images of your documents at once. You need to call them in each query.