我们正在构建一个图像轮播,它显示可点击的缩略图,点击后会显示实际图像。因此,我们需要两个 url 都出现在 Html 中。由于 img 标签中没有定义“actualImageUrl”属性,我们发现我们可以像这样构建缩略图 url /thumb.png?altUrl=actualImageUrl.png
:。服务器不关心actualImageUrl 查询字符串参数,我们可以使用javascript 来解析scr 属性并找出actualImage Url。
W3C 的有效性如何?
我们正在构建一个图像轮播,它显示可点击的缩略图,点击后会显示实际图像。因此,我们需要两个 url 都出现在 Html 中。由于 img 标签中没有定义“actualImageUrl”属性,我们发现我们可以像这样构建缩略图 url /thumb.png?altUrl=actualImageUrl.png
:。服务器不关心actualImageUrl 查询字符串参数,我们可以使用javascript 来解析scr 属性并找出actualImage Url。
W3C 的有效性如何?
更改src
属性的 URL 是完全有效的 - 但是您可以使用data-
属性 - 新的 HTML5 (尽管该 doctype 不是使用它们的要求),其目的正是如此,从规范:
自定义数据属性旨在存储页面或应用程序私有的自定义数据,没有更合适的属性或元素。
注意- 您可以在此处测试验证
任何东西作为src
属性值都是有效的,在 XHTML 中表示“有效”(一种正式的事物)。在这样的值中包含查询部分并在客户端脚本中使用它也是正确的。
但这可能是不必要的复杂。当您使用客户端 JavaScript 时,您可以将 URL 包含在 JavaScript 数组或对象中,而不是将它们放在 HTML 标记中的任何位置。例如,您可以使用具有缩略图 URL 作为属性名称和完整图像 URL 作为相应值的对象,例如
var fullImage = { 'thumb.png': 'actualImageUrl.png', ... }
然后,您将使用此对象在单击缩略图时获取完整的图像 URL。
对于更健壮的解决方案,即使在禁用 JavaScript 时也能工作,您需要在服务器端生成代码,a
围绕元素生成img
元素。