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来摆脱它们，但必须对某些字符进行\转义。使用双引号意味着您可以避免这种情况（URL本身不能出现双引号）。