gatsby - 如何使用 gatsby-image 和 contentful

Question

我正在尝试处理 Gatsby 项目中的视网膜图像。我的内容提供商是 Contentful。我正在上传 2x 图片。我目前正在使用 Gatsby-images 插件。要获得我正在使用的正确图像：

    images{
      fluid{
        ...GatsbyContentfulFluid_withWebp
      }
    } 

我还使用了应该处理视网膜图像的标签。

<Img fluid={image.fluid} alt="" class="mw-100 d-inline-block" />

但是..在一天结束时。我得到错误的图像。

我得到了 800w，所以看起来我在图像后面得到了一个断点。

https://images.ctfassets.net/rz477be2kwhw/1NwXY8PIrEYSXJKPH6iu6L/5d5a6ac1f2b45e5a4de2478b94e4d3c5/Grupo_1510_3x.png?w=800&h=701&q=50&fm=webp

Answer 1

我已经解决了这个问题。有两个问题，默认情况下 Gatsby Plugin Sharp ( https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/ ) 使用质量 50 和 maxWidth 800px。因为我在等待更大的图像，所以我只更新了 100 和 2500 的 maxWidth。

fluid(maxWidth: 2500, quality: 100){
 ...GatsbyContentfulFluid_withWebp
}

Answer 2

因此，默认情况下 gatsby 图像将质量设置为 50，宽度设置为 800 以用于流体图像。但是，您始终可以更改质量、最大宽度和 srcset 断点。

fluid(maxWidth: 1400 , quality: 100) {
  ...GatsbyImageSharpFluid
}