盖茨比不会把jpg转换成Webp

Question

我做错了什么，以至于JPG图像没有在webp中转换和优化？

它只发生在About组件中。其他组件都得到了完美的优化。

这是我的"关于"；组件

代码：

imports...
const About = () => {
const data = useStaticQuery(graphql`
query {
wordpressPage(wordpress_id: { eq: 47 }) {
content
featured_media {
localFile {
childImageSharp {
fluid(quality: 100, maxWidth: 1000) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
}
}
`)
return (
<AboutWrapper>
<div className="container-fluid">
<div className="row">
<div
className="col-md-6 aboutImage"
style={{
backgroundImage: `url(${
data.wordpressPage.featured_media.localFile.childImageSharp
.fluid.src
})`
}}
/>
<div className="col-md-6 aboutText">
<div
dangerouslySetInnerHTML={{ __html: data.wordpressPage.content }}
/>
</div>
</div>
</div>
</AboutWrapper>
)
}
export default About

Answer 1

通常，您在查询中使用的Gatsby片段会返回一堆字段，包括src、srcSet和srcSetWebp。WebP格式的图像将在srcSetWebp中，但该字段旨在传递给img或source标签(即DOM元素(，而不是作为CSS。

只使用fluid.src，您最终只能得到一张原始格式的图像。