Missing Images using Gatsby StaticImage

[yumyo]

Hi,
Thank you for your work on this plugin!
When using StatciImage from gatsby-plugin-image, I can just see a black area when an image is supposed to appear. Is there any workaround or config option that might help with the issue?

Node v14.16.1
Gatsby CLI version: 2.19.2
Gatsby version: 3.3.1
NPM 6.14.13

[jamescoq]

hi @yumyo,
thank you for trying gatsby-plugin-pdf.

To be honest I haven't tested the plugin with new gastby-plugin-image yet. However what comes to my mind is that the images displayed by gastby-plugin-image are lazy loaded by default. Try to set loading property to value "eager" on your component.
I know that is not a good solution as you probably need your images to be lazy loaded, but it can at least point us in the right direction to make a fix :)

[yumyo]

Hi @jamescoq thank you for looking into this.
I have been digging a bit and it might be related to calling await page.emulateMedia('screen'); puppeteer/puppeteer#436 (comment) as puppeteer default to print
Another option to look at might be {waitUntil: 'networkidle'}

[yumyo]

Unfortunately setting loading to 'eager' does not help. I have also tried different ways, a bare image component and a simple but no luck so far.