gatsby-image / gatsby-plugin-image 通过 gatsby-link 到达时第一次加载时不显示图像 重现步骤预期结果实际结果环境

如何解决gatsby-image / gatsby-plugin-image 通过 gatsby-link 到达时第一次加载时不显示图像 重现步骤预期结果实际结果环境

说明

每当我通过包裹在标签中的图片点击链接时，第一次加载时都不会显示。一旦我点击刷新，图像就会显示。出于某种原因，<img/> 的不透明度设置为 0 并且不会改变。我一直在 Chrome / FF / Safari (mac) 上遇到这个问题。

第一次加载：

刷新后：

我已经尝试通过实现 gatsby-plugin-image 来解决这个问题，但它的行为是相同的。

重现步骤

使用帮助程序重定向到您有一个页面的页面

预期结果

图片应该在第一次加载时显示

实际结果

图像在 DOM 中可用，但由于 opacity 停留在 0 处而未显示

环境

  System:
    OS: macOS 10.15.7
    cpu: (8) x64 Intel(R) Core(TM) i7-7820HQ cpu @ 2.90GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.15.3 - ~/.asdf/installs/nodejs/14.15.3/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.9 - ~/.asdf/installs/nodejs/14.15.3/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  browsers:
    Chrome: 89.0.4389.114
    Firefox: 87.0
    Safari: 14.0.1
  npmPackages:
    gatsby: ^3.0.3 => 3.1.3
    gatsby-background-image: ^1.4.1 => 1.5.0
    gatsby-image: ^3.0.0 => 3.1.0
    gatsby-plugin-google-analytics: ^3.1.0 => 3.1.0
    gatsby-plugin-manifest: ^3.0.0 => 3.1.0
    gatsby-plugin-offline: ^4.0.0 => 4.1.0
    gatsby-plugin-polyfill-io: ^1.1.0 => 1.1.0
    gatsby-plugin-postcss: ^4.0.0 => 4.1.0
    gatsby-plugin-react-helmet: ^4.0.0 => 4.1.0
    gatsby-plugin-sass: ^4.0.2 => 4.1.0
    gatsby-plugin-sharp: ^3.0.0 => 3.1.3
    gatsby-plugin-sitemap: ^3.0.0 => 3.1.0
    gatsby-plugin-typography: ^3.0.0 => 3.1.0
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-remark-copy-linked-files: ^3.0.0 => 3.1.0
    gatsby-remark-images: ^4.0.0 => 4.1.1
    gatsby-remark-prismjs: ^4.0.0 => 4.1.0
    gatsby-remark-responsive-iframe: ^3.0.0 => 3.1.0
    gatsby-remark-smartypants: ^3.0.0 => 3.1.0
    gatsby-source-filesystem: ^3.0.0 => 3.1.0
    gatsby-source-sanity: ^6.0.5 => 7.0.0
    gatsby-transformer-remark: ^3.0.0 => 3.1.0
    gatsby-transformer-sharp: ^3.0.0 => 3.1.0
    gatsby-transformer-yaml: ^3.0.0 => 3.1.0
  npmGlobalPackages:
    gatsby-cli: 3.1.0

谢谢。快把我逼疯了！