如何使用 gatsby-image 和 contentful答案

【问题标题】：How to use gatsby-image and contentful如何使用 gatsby-image 和 contentful
【发布时间】：2020-09-30 03:14:57
【问题描述】：

我正在尝试处理 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

【问题讨论】：

标签： gatsby gatsby-image

【解决方案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
}

【讨论】：

【解决方案2】：

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

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

【讨论】：