Gatsbyjs 图像与 Webp 并使用图片标签回退到 jpg 不起作用

Question

我在我的反应网站中使用 Gatsbyjs 图像我尝试使用图片标签添加回退到 jpg 但它不起作用，它只是加载 jpg 文件这里是代码

                     <Box {...portfolioImage}>
                        <picture>
                          <source
                            srcset={
                              (portfolioItem.image !== null) | undefined
                                ? portfolioItem.image.childImageSharp.fluid
                                : {}
                            }
                            type="image/webp"
                            alt={`PortfolioImage-${index + 1}`}
                          />
                          <Image
                            fluid={
                              (portfolioItem.imageFallback !== null) |
                              undefined
                                ? portfolioItem.imageFallback
                                    .childImageSharp.fluid
                                : {}
                            }
                            alt={`PortfolioImage-${index + 1}`}
                          />
                        </picture>
                      </Box>

数据

image {
              childImageSharp {
                fluid(quality: 100) {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }
            imageFallback {
              childImageSharp {
                fluid(quality: 100) {
                  ...GatsbyImageSharpFluid
                }
              }
            }

Answer 1

盖茨比图像本身是一个组件，而不是要放置在srcSet 属性中的数据。在您的情况下，您应该根据 portfolioItem.image.childImageSharp.fluid 数据呈现一个或另一个组件，具体取决于是否存在。此外，这些三元条件对我来说似乎很奇怪。

假设您的 GraphQL 查询按预期工作并且正在检索数据。我建议更简单一些：

{portfolioItem.imageFallback.childImageSharp.fluid
  ? <Image fluid={portfolioItem.imageFallback.childImageSharp.fluid} alt={`PortfolioImage-${index + 1}`} />
  : <picture><source srcSet={portfolioItem.imageFallback} alt={`PortfolioImage-${index + 1}`} /></picture>
}

使用上面的 sn-p，您只需在数据存在时渲染 <Image>（来自 Gatsby 图像），如果不存在则渲染 <picture> 后备图像。

将 Gatsby 图像包装在 <picture> 标记内并不像您想象的那么有用，因为图像组件内部将是一堆嵌套的 <div>s，具有自己的 JavaScript 回退和模糊。这将更改您的 <picture> 标记的默认子项，从而导致潜在问题或布局错误。

---

检查数据不是重点，我设置了我需要检查的数据 浏览器支持 webp 图像格式，这就是图片标签 应该做，但它似乎不适用于动态图像或 从 JSON/grahql 加载的图像

Gatsby Image 会自动处理它。来自their documentation：

如果你想在浏览器支持的时候自动使用WebP images 文件格式，使用withWebp 片段。如果浏览器没有 支持WebP，gatsby-image会回退到默认图片格式。

---

需要再次测试，但它在 safari 上不起作用

Safari（或 MacOS 设备）中存在一个触发交叉点观察器的已知错误。填充它：

yarn add intersection-observer

在你的gatsby-browser.js:

export const onClientEntry = async () => {
  if (typeof IntersectionObserver === "undefined") {
    await import("intersection-observer");
    console.log("IntersectionObserver polyfilled ;)");
  }
};