如何解决使用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 ;)");
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。