使用Webp的Gatsbyjs图像和使用图片标签后退到jpg的效果不佳

问题描述

我在我的React网站中使用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
                }
              }
            }

解决方法

Gatsby图像本身就是一个组件，而不是要放置在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>
}

在上面的代码段中，如果数据存在，则只需渲染<Image>（来自Gatsby图像），否则就渲染<picture>后备图像。

将盖茨比图像包装在<picture>标签内并没有您想象的那么有用，因为图像组件内部将是一堆嵌套的<div>，它们具有自己的JavaScript后备和模糊效果。这将更改您的<picture>标签的默认子元素，从而导致潜在的问题或布局错误。

---

检查数据不是重点，我设置了我需要检查的数据 浏览器支持webp图像格式，即图片标签 应该可以，但似乎无法处理动态图像或 从JSON / grahql

加载的图像

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

如果您想在浏览器支持时自动使用WebP images 文件格式，请使用withWebp片段。如果浏览器没有 支持WebP，gatsby-image将恢复为默认图像格式。

---

需要再次测试，但实际上它不适用于野生动物园

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 ;)");
  }
};