当 Gatsby 站点部署在 Netlify 上时图像尺寸错误响应
bad size image responsive when gatsby site is deploy on Netlify
我制作了一个图像流畅的 Gatsby 网站，以便在我的网站上有一个响应图像，在本地开发中工作正常，当我构建和使用 serve 在本地部署时，所有图像的大小都很好。但是当它部署在 Netlify 上时，图像选择不是很好，结果有点模糊。要显示的尺寸选择就在好的尺寸下方。我不知道我能做些什么来解决它......
我尝试部署的方式：首先将我的站点托管在 github 上，然后将我的站点拖放到 netlify 上。
所以我有点迷路...
https://github.com/dinhostan/lavoieducode/blob/master/src/pages/stan/culture/artistes.js
我建议删除查询 (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/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)"。
我觉得这种方法在本地有效很奇怪，但是，如果您想尝试一下，可以 force the Node version to the Netlify side creating a .nvmrc 使用本地 Node 版本在项目的根目录中文件。这将确保两种环境（本地和 Netlify）在同一个 Node 保护伞下工作。只是 运行:
node -v > .nvmrc
正如我所说，这将在项目的根目录中创建一个 .nvmrc 文件，Netlify 将在部署期间捕获该文件以设置节点版本（安装依赖项时的关键）。
我制作了一个图像流畅的 Gatsby 网站，以便在我的网站上有一个响应图像，在本地开发中工作正常，当我构建和使用 serve 在本地部署时，所有图像的大小都很好。但是当它部署在 Netlify 上时，图像选择不是很好，结果有点模糊。要显示的尺寸选择就在好的尺寸下方。我不知道我能做些什么来解决它...... 我尝试部署的方式：首先将我的站点托管在 github 上，然后将我的站点拖放到 netlify 上。 所以我有点迷路...
https://github.com/dinhostan/lavoieducode/blob/master/src/pages/stan/culture/artistes.js
我建议删除查询 (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/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)"。
我觉得这种方法在本地有效很奇怪，但是，如果您想尝试一下，可以 force the Node version to the Netlify side creating a .nvmrc 使用本地 Node 版本在项目的根目录中文件。这将确保两种环境（本地和 Netlify）在同一个 Node 保护伞下工作。只是 运行:
node -v > .nvmrc
正如我所说，这将在项目的根目录中创建一个 .nvmrc 文件，Netlify 将在部署期间捕获该文件以设置节点版本（安装依赖项时的关键）。