3

如：

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

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

因此，虽然我不喜欢这种方法的外观，但它似乎在 Chrome 甚至 IE 中都能正常工作，并且它解决了客户只需存储一个带有签名授权的文件的请求。

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

4

4 回答 4

4

引用操作： 

<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 有效性的问题都应该通过在线验证器来解决：http: //validator.w3.org/

于 2012-09-18T21:30:24.017 回答
1

HTML无效。但是，如果您深入研究一下，您会发现HTML4 规范中对Data 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 的东西，关于 Data URI Scheme 的 Wikipedia 文章包含专门讨论浏览器支持的部分。

看起来 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)

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

于 2012-09-18T21:21:01.690 回答
0

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

于 2012-09-18T21:19:09.240 回答
0

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

维基百科：数据 URI 方案

于 2012-09-18T21:20:59.223 回答