如何解决Gatsby.js的图像模糊
我对React / Gatsby还是陌生的，刚刚调整了一个模板来创建站点www.flakyrecords.com。
我使用Gatsby命令gatsby build打包了网站，该命令在公共文件夹中创建了网站。然后，我将所有文件和文件夹从此公共目录复制到我的托管服务提供商。
在大多数情况下，它可以正常工作-但是，如您所见，图像非常模糊。为了将图像发布为清晰/清晰的焦点，我是否需要在这里做些明显的事情？
非常感谢。
解决方法
您的图像路径错误。
gatsby-image通过在加载图像本身时添加data-image来创建模糊效果。在您的情况下，由于找不到资产，它保持了模糊状态。
这是您的输出代码：
<div class=" gatsby-image-wrapper" style="position: relative; overflow: hidden;"><div aria-hidden="true" style="width: 100%; padding-bottom: 116.959%;"></div><img aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAXCAIAAACEf/j0AAAACXBIWXMAAAsTAAALEwEAmpwYAAADdElEQVQ4y52TWSivaxTGXzMlKcc8plDChQyhyDyHK1FEpkxlvECUKZJ5TkQUhVLKVC7IlKmMuaFIUorITDg//+/fPvvUOZ29z7p4e7/1rWetZz1rvcLFxaWxsfHk5OTy8vLp6enl5eXt7e3z8/Pr64vz/v7+9vb24uLi4OBgcXFxfHy8s7OzrKwsLi7Oy8tLmJqaOjg41NTUDA4Ozs/Pr6ysrK2tLS8vb2xscAFzdHTEfWFhYXZ2dnR0tKenp6CgwM/Pz9raWpiZmZFmbGzs8PDw7u6O4lTe3d2lQl9fX3JycmxsbFNTU3FxcVJSUmhoqLu7u76+voqKiqqqqnBycqqqqtrZ2Xl+fv6S2cPDQ3R0tBBCXV1dyCwlJWVkZIQw8AEBATo6OjgVFBSEo6Nje3v76enpx8fH+/s7YFhpa2t3dXX19/cXFhYaGRkpKiomJCS0traWlJTAxcLCQg728PCora0F/Pr6CpImjY2N6Zw7/DnBSPXz8vLa2tpyc3NdXV29vb0NDAwEJCsrKzc3NyXOkZGRUVFRXGCB8lz29va+44QICwsbGBigOJ2TwsTERPB7aWkpPT19f39/e3uboKKiIi7X19fStFAxNTUVv5qaGh01Nze7ubnxSS8CtpB0dnaenJyEP960tLSIiAi6ZUipMgsODpaY+/r6MgI0k4NXV1eHhobi4+Npu6OjA4bkBomf8WZkZFRUVPj7+7MOAKjR3d0dGBgoFywrK6uuro58kGxoaAgJCbm6ukL58/PziYmJ7OxsRMGTk5MDQFdXF4H+qsyEh4eH5+bmAJeXl5P17OwMMJ7e3l57e3vW8/HxMTw8HICVlVV+fj5E5GAwx8fHNzc3XGDLhJGXOxsWFBTk6ekJBbJoaGjAU0tLi4FLEsjBW1tb1KEsu85WIf709DQ6+fj4MM/6+noAktrKyspwxi8HswmlpaWkBEZ6lralpYV3RpCtrS1Nssl2dnZEg+TvHzKTxBc8HT09PbIS9y2gEDY2NjMzM+vr65mZmWw1b05JSUkKJoCCUti3TU1N8bBwaWpqysmI79dCcWkqqCAfjMwUZSYHw5ayUkqJGyfa8mINDQ0tLS3F301BZuIfja44Y2Ji2BCmyD7+oPOv9iOfdJqbmycmJlZXV39v/0+c/9sIpREkYAS/AfsZLyn8f8C/aH8CTv/RsiNYjf4AAAAASUVORK5CYII=" alt="" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition-delay: 500ms;"><picture><source srcset="/static/a4acc2fd3768aba6c88aea6e0ca345b2/8080f/lyle-03.png 342w,/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png 657w" sizes="(max-width: 657px) 100vw,657px"><img sizes="(max-width: 657px) 100vw,657px" srcset="/static/a4acc2fd3768aba6c88aea6e0ca345b2/8080f/lyle-03.png 342w,/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png 657w" src="/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png" alt="Lyle Christine" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition: opacity 500ms ease 0s;"></picture><noscript><picture><source srcset="/static/a4acc2fd3768aba6c88aea6e0ca345b2/8080f/lyle-03.png 342w,657px" /><img loading="lazy" sizes="(max-width: 657px) 100vw,/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png 657w" src="/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png" alt="Lyle Christine" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div>
如果您尝试查找https://www.flakyrecords.com/static/a4acc2fd3768aba6c88aea6e0ca345b2/26a97/lyle-03.png，则会抛出404错误。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
