CSS和JQuery:图像名称中的空格中断url()的代码

Question

我有一个页面,当在鼠标悬停在缩略图上时,它应该显示更大版本的图像.

我有一个带有ID的'div',JQuery代码如下:

$(document).ready(function(){

  $('img').hover(function() {

    var src = $("#im" + this.id).attr("src");
    $('#viewlarge').css('backgroundImage','url(' + src +')'); 
    return false;
  });

});

我使用的图像是由Ruby脚本生成的,该脚本"生成"具有相似但不同id的图像.但是,有时会上传内部有"空格"的照片.我的开发人员工具告诉我背景图像设置不正确,但图像路径是正确的,浏览器在查找图像时没有问题.

我的问题是,我可以以某种方式消毒url'src',所以空格不会有问题吗？我知道这个服务器端,但我想知道如何使用JQuery/JS.

谢谢!

Answer 1

空格在URI中无效.他们需要编码%20.

您可以src.replace(/ /g, '%20')(或更一般地)encodeURI(src)对%URI中无效的所有字符进行编码.encodeURIComponent(src)更常见,但只有当它src只是一个相对文件名时才会起作用; 否则,它会编码/并停止路径工作.

但是,真正的问题是原始版本img src已经损坏,只有通过浏览器修正才能纠正错误.您需要修复生成页面的Ruby脚本.在将文件名包含在路径中之前,您应该对文件名进行URL编码; 还有更多的角色可以解决你的问题,而不仅仅是空间.

正如Pekka所说,你还应该在url(...)值中使用URL周围的引号.虽然你可以在没有它们的情况下离开许多网址,但是某些字符必须被\包含在内.使用双引号意味着您可以避免这种情况(URL本身不会出现双引号).

Answer 2

在URL周围添加引号应该有助于:

  $('#viewlarge').css('backgroundImage','url("' + src +'")'); 

但是,根据W3C规范,必须转义空白区域,因此@Andy E的负责人 @bobince 提供的URL编码解决方案是最安全的.