CSS和JQuery：图像名称中的空格中断url（）的代码
我有一个页面，当在鼠标hover在缩略图上时，它应该显示更大的图像版本。
我有一个带有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这样做。
谢谢！
空格在URI中无效。 它们需要编码为%20 。
你可以src.replace(/ /g, '%20') ，或者更一般地， encodeURI(src)来对所有在URI中无效的字符进行编码。 encodeURIComponent(src)更常见，但只有当src只是一个相对文件名时才会起作用; 否则，它会编码/停止路径工作。
但是， 真正的问题是原来的img src已经坏了，只能通过浏览器修正来纠正你的错误。 您需要修复生成页面的Ruby脚本。 在将文件名包含在路径中之前，您应该对文件名进行URL编码; 除了空间之外，还有更多的角色可以解决你的问题。
正如Pekka所说，你还应该在url(...)值中使用URL周围的引号。 虽然你可以在没有它们的情况下离开许多url，但是某些字符必须是\ -escaped。 使用双引号意味着您可以避免这种情况（URL本身不会出现双引号）。
在URL周围添加引号应该有助于：
$('#viewlarge').css('backgroundImage','url("' + src +'")');
但是，根据W3C规范 ，必须转义空白区域，因此@Andy E的负责人 @bobince提供的URL编码解决方案是最安全的。
- 首先，为什么让客户确定图像的名称？
- 其次，你为什么不对它们进行消毒？
- 第三，我怀疑当你将它们写入html时，你不会对url进行urlencoding（这会将空格转换为％20）
使用Javascript encode函数对’ src ‘进行编码
例如
$('#viewlarge').css('backgroundImage','url(' + encode(src) +')');
我想你也可以使用Javascript’escape’function
$('#viewlarge').css('backgroundImage','url(' + escape(src) +')');
我不允许上传文件名中带空格的图片 – 这对我来说似乎不太好。
我知道你已经选择了你的答案，但我想改进Pekka的解决方案并提供最可行的解决方案，因为我在处理带括号的文件名时遇到了另一个问题。
$("#viewlarge").css("background",'url(' + "'" + url+ "'" + ')');
我希望它有所帮助！