问题描述
我制作了一个带有图像流体的 Gatsby 站点，以便在我的站点上有一个响应式图像，这在本地开发中运行良好，当我构建和使用服务在本地部署时，所有图像都有合适的大小。但是当它部署在 Netlify 上时，图像选择不是很好的，结果几乎没有模糊。要显示的尺寸选择就在好的选择之下。我不知道我能做些什么来解决它...... 我尝试部署的方式：首先将我的网站托管在 github 上，另一个是将我的网站拖放到 netlify 上。 所以我有点迷失...
https://github.com/dinhostan/lavoieducode/blob/master/src/pages/stan/culture/artistes.js
https://lavoieducode.netlify.app/stan/culture/artistes
解决方法
我建议删除查询 (line 62) 中的 maxHeight 属性，该属性本质上固定高度，限制图像。您正在一个更大的容器（视口的 300px 或 100vw）中设置最大高度 100%，创建如下输出：
<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/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>
注意 sizes="(max-width: 300px)" 标签中的 picture。
我觉得这种方法在本地有效很奇怪，但是，如果您想尝试一下，您可以使用您的本地 Node 版本在项目的根目录中 force the Node version to the Netlify side creating a .nvmrc 文件。这将确保两个环境（本地和 Netlify）在同一个 Node 保护伞下工作。只需运行：
node -v > .nvmrc
正如我所说，这将在您项目的根目录中创建一个 .nvmrc 文件，Netlify 将在部署期间捕获该文件以设置 Node 版本（安装依赖项时的关键）。