我制作了一个带有图像流体的 Gatsby 网站，以便在我的网站上拥有一个响应式图像，该图像在本地开发中运行良好，当我在本地构建和使用 serve 部署时，所有图像都有一个合适的大小。但是当它部署在 Netlify 上时，图像选择不是很好，而且结果有点模糊。要显示的尺寸选择正好在好的尺寸之下。我想不出我能做些什么来解决它...... 我尝试部署方式：首先将我的网站托管在 github 上，然后将我的网站拖放到 netlify 上。 所以我有点迷失......
https://github.com/dinhostan/lavoieducode/blob/master/src/pages/stan/culture/artistes.js
【问题讨论】：
标签： deployment graphql gatsby netlify responsive-images
我建议删除查询 (line 62) 中的 maxHeight 属性，该属性在本质上固定高度，限制图像。您在更大的容器（视口的100vw 或100%）中设置最大高度300px，创建如下输出：
<picture><source srcset="/static/71cab95f897e5df896f6b7f6f158ce76/240b5/casey_reas_0.jpg 75w,
/static/71cab95f897e5df896f6b7f6f158ce76/ba5d5/casey_reas_0.jpg 150w,
/static/71cab95f897e5df896f6b7f6f158ce76/99d74/casey_reas_0.jpg 300w,
/static/71cab95f897e5df896f6b7f6f158ce76/1e170/casey_reas_0.jpg 450w,
/static/71cab95f897e5df896f6b7f6f158ce76/0d31e/casey_reas_0.jpg 600w,
/static/71cab95f897e5df896f6b7f6f158ce76/ad7ed/casey_reas_0.jpg 914w" sizes="(max-width: 300px) 100vw, 300px"><img sizes="(max-width: 300px) 100vw, 300px" srcset="/static/71cab95f897e5df896f6b7f6f158ce76/240b5/casey_reas_0.jpg 75w,
/static/71cab95f897e5df896f6b7f6f158ce76/ba5d5/casey_reas_0.jpg 150w,
/static/71cab95f897e5df896f6b7f6f158ce76/99d74/casey_reas_0.jpg 300w,
/static/71cab95f897e5df896f6b7f6f158ce76/1e170/casey_reas_0.jpg 450w,
/static/71cab95f897e5df896f6b7f6f158ce76/0d31e/casey_reas_0.jpg 600w,
/static/71cab95f897e5df896f6b7f6f158ce76/ad7ed/casey_reas_0.jpg 914w" src="/static/71cab95f897e5df896f6b7f6f158ce76/99d74/casey_reas_0.jpg" alt="" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;"></picture>
注意picture 标签中的sizes="(max-width: 300px)"。
我觉得这种方法在本地工作很奇怪，但是，如果你想尝试一下，你可以在项目的根目录中使用本地 Node 版本的 force the Node version to the Netlify side creating a .nvmrc 文件。这将确保两个环境（本地和 Netlify）在同一个 Node 保护伞下工作。运行：
node -v > .nvmrc
正如我所说，这将在项目的根目录中创建一个 .nvmrc 文件，Netlify 将在部署期间捕获该文件以设置 Node 版本（安装依赖项时的关键）。
【讨论】：