在 Netlify 上部署 gatsby 站点时响应错误的大小图像

Posted 2023-03-08

【中文标题】在 Netlify 上部署 gatsby 站点时响应错误的大小图像

【英文标题】：bad size image responsive when gatsby site is deploy on Netlify

【发布时间】：2021-08-16 23:06:57

【问题描述】：

我制作了一个带有图像流体的 Gatsby 网站，以便在我的网站上拥有一个响应式图像，该图像在本地开发中运行良好，当我在本地构建和使用 serve 部署时，所有图像都有一个合适的大小。但是当它部署在 Netlify 上时，图像选择不是很好，而且结果有点模糊。要显示的尺寸选择正好在好的尺寸之下。我想不出我能做些什么来解决它...... 我尝试部署方式：首先将我的网站托管在 github 上，然后将我的网站拖放到 netlify 上。 所以我有点迷失......

https://github.com/dinhostan/lavoieducode/blob/master/src/pages/stan/culture/artistes.js

https://lavoieducode.netlify.app/stan/culture/artistes

【参考方案1】：

我建议删除查询 (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"  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 版本（安装依赖项时的关键）。

【讨论】：

你已经像往常一样解决了问题！你是一个真正的 gatsby-react 魔术师......谢谢你的技巧，让我的应用程序像在实际部署中一样工作。