Js-core: 在以下情况下使用时图像使寄宿生变形<meta/>标签

创建于 2020-10-21 · 1评论 · 资料来源: imgix/js-core

描述错误
使用imgix-core-js生成的混合水印图像与原始图像包装后的外观不同

标签并作为预览加载。
包裹的图像使寄宿生扭曲。

重现
重现行为的步骤：

这是通过imgix生成的图像： https://nate.imgix.net/nateLogo.png?q=1&auto=compress%2Cformat&w=600&bm=normal&bx=390&markx=180&markpad=0&markalign=left&blend64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDJiNmFkZjI5OTAwMzgwNjJjMDcuanBnP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9Mzg1M2E5MGFhOWE2MzRhZDg1MTdmYjNkMTllMmQ3ZGY&mark64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDA1NmU4NDI2MjAwMzg4MGU1ZTgucG5nP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9N2UzMWM2ZmQyODMyODExMDE1YzY4NzUxMmEyNTdmOGM&ixlib=js-2.3。 1＆s = 9d3826f9ca00ae169bebc220d2f4e259
像这样包装上面的链接
<meta property="og:image" content="https://nate.imgix.net/nateLogo.png?q=1&auto=compress,format&w=600&bm=normal&bx=390&markx=180&markpad=0&markalign=left&blend64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDJiNmFkZjI5OTAwMzgwNjJjMDcuanBnP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9Mzg1M2E5MGFhOWE2MzRhZDg1MTdmYjNkMTllMmQ3ZGY&mark64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDA1NmU4NDI2MjAwMzg4MGU1ZTgucG5nP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9N2UzMWM2ZmQyODMyODExMDE1YzY4NzUxMmEyNTdmOGM&ixlib=js-2.3.1&s=9d3826f9ca00ae169bebc220d2f4e259">

其他例子：
Screen Shot 2020-10-02 at 8 57 49 AM
IMG_B17400BFF561-1

信息：

bug

资料来源

ChelseaRong

👍7

>所有评论

@ChelseaRong原来，该伪q参数设置为非常低的值（ q=1 ）引起的。发生的事情的完整细分：

应用参数q=1&auto=compress ，它将呈现图像的最低质量版本
- 由于质量太低，因此图像的压缩渲染版本最终会出现伪像（在这种情况下为较大的模糊线）
参数auto=format导致此问题仅在某些浏览器/爬网程序中显示
- 由于社交抓取工具没有检测到的支持WebP的用户代理，因此我们提供的.jpg版本压缩后的质量比WebP低得多
- 这也是为什么我们在支持WebP的浏览器（例如Chrome或Firefox）中看不到该问题的原因

要解决此问题，建议将q参数设置为至少25 。

由于它不是imgix-core-js错误，因此我将解决此问题，但是如果您需要进一步调试imgix呈现API，请联系[email protected]。

heyitsbryanm 于 2020-10-22

👀1 👍1

此页面是否有帮助？

0 / 5 - 0 等级