“解析 'srcset' 属性值失败，因为它的 'w' 描述符无效”是什么意思。意思是？答案

【问题标题】：What does "Failed parsing 'srcset' attribute value since its 'w' descriptor is invalid." mean?“解析 'srcset' 属性值失败，因为它的 'w' 描述符无效”是什么意思。意思是？
【发布时间】：2015-09-13 11:12:06
【问题描述】：

我的网站上的 Chrome 错误提示：

解析 'srcset' 属性值失败，因为它的 'w' 描述符是无效。
已删除 srcset 候选 http://i2.wp.com/domain.net/wp-content/.../image.jpg?resize=425%2C200

知道这意味着什么吗？

我使用 WordPress 作为我的网站平台。我还使用了它的 Photon 功能（在它的 Jetpack 框架内）。我怀疑它与此功能有关。图像尺寸是否指定不正确或其他？

什么是“w”描述符？

更新：这是 HTML：

<img src="http://i1.wp.com/gaithersburgpsychologist.net/wp-content/uploads/2015/02/lightbulb.jpg?resize=425%2C200"
   srcset="http://i1.wp.com/gaithersburgpsychologist.net/wp-content/uploads/2015/02/lightbulb.jpg?resize=425%2C200 w, http://i1.wp.com/gaithersburgpsychologist.net/wp-content/uploads/2015/02/lightbulb.jpg?resize=450%2C320 w"
   sizes="(min-width: 768px) 720px, (min-width: 992px) 700px, (min-width: 1200px) 850px, calc(100vw-20px)"
   alt="Change your thoughts and you change your world.">

【问题讨论】：

这将有助于实际查看 Chrome 所引用的 HTML 源代码（您还可以从 the W3C validator 获得更多信息）。
是的，这可能会有所帮助。已添加。
描述符描述了图像候选的物理宽度。它是一个后跟w 的数字。在您的情况下，号码丢失。
@alexanderfarkas 有没有一个规范可以让我更详细地描述这一点？这不是我熟悉的 HTML 的一个方面。
html.spec.whatwg.org/multipage/…

标签： html wordpress

【解决方案1】：

我遇到了类似的错误：

解析 srcset 属性值失败，因为它有一个未知的描述符

问题是由图像路径 URL 中的空格引起的。

【讨论】：

是的！对于有空格的目录 PHP 可以echo str_replace(' ', '%20',$url);
在我的情况下，图片网址中有一个空格，并且在扩展名之前有两个点，例如 (image..jpg)

【解决方案2】：

tldr;您的 html 无效，并且您缺少实际的宽度数字。

这是一个有效的带有 srcset 的 img 标签：

<img src="phone.jpg" srcset="phone-small.jpg 256w, phone-big.jpg 512w" />

它说如果你的浏览器理解srcset，它应该在宽度约为 256 px 宽时使用小图像，在 512 px 宽时使用较大图像。

在您的图片标签中，w 前面没有任何内容：

srcset="http://...resize=425%2C200 w, ...

注意没有指定宽度？那就是问题所在。将其更改为 600w 之类的内容，以将图片用于 600 像素的屏幕宽度等。

【讨论】：

【解决方案3】：

在我的例子中，我使用一个名为 srcset-loader 的 webpack 加载器生成我的 srcset，它输出的是 JSON 对象而不是正确的字符串。

【讨论】：

【解决方案4】：

就我而言，与上述所有情况一样，图像 URL 已损坏：

例子：

https://aaaa.aaaa.com/?somequery

替换 /?和？帮助。

【讨论】：

【解决方案5】：

就我而言，我只是忘记在图片之间加逗号

【讨论】：

您能否分享代码示例以帮助您更清楚地理解您的意思

【解决方案6】：

在我的例子中，我以编程方式创建 srcset 大小，并且具有像 347.99999w 这样的值。用 Math.floor() 解决。

【讨论】：

【解决方案7】：

通过删除 url 文件名中的空格来修复

【讨论】：

【解决方案8】：

通过将 1X、2X 修改为 1x、2x 来修复

【讨论】：