gatsby-image：设置图像处理管道

Question

我正在Gatsby.js网站上工作，想使用gatsby-image和gatsby-plugin-sharp设置图像预处理。 问题是我使用的图像具有不同的宽高比和不同的尺寸。我想实现的是自动生成的方形流体缩略图。到目前为止，我在GraphQL查询中成功使用了fluid，但不幸的是它裁剪了图像。我还尝试了fit参数形式的gatsby-plugin-sharp文档，但是好像它已被删除了：

image {
  relativePath
  childImageSharp {
    fluid(maxWidth: 320, maxHeight: 320, cropFocus: CENTER) {
      ...GatsbyImageSharpFluid
    }
  }
}

结果： 预期结果：

源图像为正方形-2480x2480 px。

所以我想知道是否有一种方法可以设置图像处理的多个步骤-首先将大小调整为所需尺寸的2倍或3倍，然后再调整大小？

我对package.json的依赖，以防万一：

"gatsby": "^2.2.8",
"gatsby-image": "^2.0.41",
"gatsby-paginate": "^1.0.17",
"gatsby-plugin-google-tagmanager": "^2.0.10",
"gatsby-plugin-layout": "^1.0.13",
"gatsby-plugin-less": "^2.0.12",
"gatsby-plugin-manifest": "^2.0.24",
"gatsby-plugin-netlify-cms": "^3.0.16",
"gatsby-plugin-netlify-cms-paths": "^1.2.1",
"gatsby-plugin-offline": "^2.0.25",
"gatsby-plugin-react-helmet": "^3.0.10",
"gatsby-plugin-sharp": "^2.0.32",
"gatsby-remark-images": "^3.0.10",
"gatsby-remark-relative-images": "^0.2.2",
"gatsby-source-filesystem": "^2.0.28",
"gatsby-transformer-remark": "^2.3.8",

Answer 1

我能够解决我的问题：

1. fit已添加到gatsby-plugin-sharp@2.0.34中，我正在使用 2.0.32。因此npm update对此提供了帮助。
2. 我的源图像是方形的，这是错误的。它是垂直的，这就是为什么要裁剪结果图像的原因。

因此，无需对缩略图进行多步处理。