一尘不染

CSS和JQuery:图片名称中的空格会破坏url()的代码

css

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

我有一个带有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进行此操作。

谢谢!


阅读 500

收藏
2020-05-16

共1个答案

一尘不染

URI中的空格无效。它们需要编码为%20

您可以src.replace(/ /g, '%20')(或更一般而言)encodeURI(src)%URI中无效的所有字符进行编码。encodeURIComponent(src)更为常见,但只有在src相对文件名唯一的情况下才有效;否则,它将编码/并停止路径。

但是, 真正的问题 是,原始文件img src已经损坏,并且只能通过浏览器修复程序来更正错误才能正常工作。您需要修复生成页面的Ruby脚本。在将文件名包含在路径中之前,应先对其进行URL编码。除了空格以外,还有更多会导致问题的字符。

正如Pekka所说,您还应该在url(...)值中的URL周围使用引号。尽管您可以不用许多URL来摆脱它们,但必须对某些字符进行\转义。使用双引号意味着您可以避免这种情况(URL本身不能出现双引号)。

2020-05-16