将图像存储在 HTML 文件中是否有效

Question

例如：

<img style="width:500px;height:150px;background:url(data:image/png;base64,BLAH)" />

我拥有的应用程序显示授权书，然后显示画布。 画布允许触摸/鼠标事件，用户可以将其名称签名。 然后保存 HTML 和签名。 客户要求将这些文件保存到一个文件中，以便将来不会获得不匹配的签名 PNG 文件和 HTML 文本文件。

因此，虽然我不喜欢这种方法的外观，但它似乎在Chrome甚至IE中运行良好，并且它解决了客户只需使用签名授权存储一个文件的要求。

我的问题是 - 这是合法的 HTML 还是 Chrome 对我很好？

Answer 1

引用 OP：

<img style="width:500px;height:150px;background:url(data:image/png;base64,BLAH)" />

"我的问题是 - 这是合法的HTML吗？"

---

不。 根据 W3C HTML 规范，src属性"必须存在"。

为什么不把你的img变成div呢？

<div style="width:500px;height:150px;background:url(data:image/png;base64,BLAH)"></div>

一般来说，关于HTML有效性的任何问题都应该在进入SO：http://validator.w3.org/之前通过在线验证器提出。

Answer 2

HTML 无效。但是，如果你稍微挖掘一下，你会发现HTML4规范中对数据URI方案的引用：

<OBJECT id="clock1"
        classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
        data="data:application/x-oleobject;base64, ...base64 data...">
    A clock.
</OBJECT>

。所以问题不在于data: URI。至于这是否是仅限chrome的事情，维基百科关于数据URI方案的文章包含一个专门用于浏览器支持的部分。

看起来 CSS 也无效。以下内容在 w3c CSS 验证器上的验证失败：

.wtv {
    background:url(data:image/png;base64,BLAH);
    color:red;
}

验证程序给出以下错误：

Value Error : background url(data:image/png;base64,BLAH) is an incorrect URL url(data:image/png;base64,BLAH)

所以你正在做的事情是有效的，但根据法律条文，它是无效的。

Answer 3

在我看来这很好。在 CSS 声明中包含实际的 base64 图像数据是可以的。如果进程的输出只是一个 HTML 文件，则这是一个有趣的方法。

Answer 4

在这种情况下，问题是这是否是有效的 CSS。但是，它可以在两者中使用，并且应该是有效的。但请注意，并非所有浏览器都支持它。

维基百科：数据URI方案