如何使用 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 插件 Sharp (https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/) 使用质量 50 和最大宽度 800 像素。我只是更新了 quality 100 和 maxWidth 的 2500 因为我在等待更大的图像。

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

Answer 2

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

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

如何使用 gatsby-image 和 contentful

How to use gatsby-image and contentful

gatsby

gatsby-image