将“attr-binding”与 knockout.js 一起使用时 HTML 无效（img: 'src' 必须为非空）答案

【问题标题】：Invalid HTML (img: 'src' must be non-empty) when using "attr-binding" with knockout.js将“attr-binding”与 knockout.js 一起使用时 HTML 无效（img: 'src' 必须为非空）
【发布时间】：2014-02-10 17:05:39
【问题描述】：

我喜欢 knockout.js，而且我经常使用。

但是当我对 img 的 src 或 alt 属性使用“attr-binding”时，例如

data-bind="attr: { src: photo.src, alt: 'description'}"

W3C 验证器说这是无效的 HTML：

元素img 上的属性src 的值错误：必须非空。

他们是对的，因为在模型被绑定和执行之前属性是空的。

除了提供指向错误图像的链接之外，还有其他解决方法吗？或者换句话说，这是某人以前遇到过的真正问题吗？

【问题讨论】：

您是否为图像定义了 alt 属性？如何准确传递 src 值？
我意识到这不是一个真正的问题，因为它没有真正的答案，我想表达的是，src 和 alt 标签在 js 执行时获取它们的值并且初始它们是空的，所以淘汰赛产生在执行js之前无效的html

标签： html data-binding knockout.js w3c-validation

【解决方案1】：

你可以试试

<img src="#" alt="" data-bind="attr: { src: photo.src, alt: 'description'}" />

【讨论】：

【解决方案2】：

你总是可以使用这个 -

data-bind="attr: { src: photo.src || 'default.jpg' }"

小提琴示例 - http://jsfiddle.net/jAYPL/

【讨论】：