Javascript 使用jQuery更改showcase图像源仅适用于Chrome

我犯了一个错误，在将我的网站上线之前，我只在Chrome上测试了它，现在我正在快速尝试修补使用Firefox和IE的人们报告的一些错误

在buggy的网页上，有一些图片，上面散布着class

block

，还有一个介绍性的默认图片，中间是id

currentImg

。当用户单击一个块时，

currentImg

将其

src

属性更改为所选块的属性，显示单击图片的较大版本

$('.block').click(function(){
    var id = this.id; //Gets clicked block id
    var src = ($(this).css('background-image')); //Gets block image source
    src = src.replace('url(','').replace(')',''); //Formats file path
    //alert(src); //Source check (Always successful)

    $('#currentImg').attr('src', src); //I think this is where the issue is
});

显示的图像从不改变默认值。当我实现淡入淡出过渡时，默认淡出并返回，而不是新图像

JSFiddle：

---

您的问题是，不同浏览器返回

背景图像的方式不一致。以下都是有效的
url
声明

url（image.png）
url（'image.png'）
url（“image.png”）
但是，不同的浏览器返回的属性不同，并且不一定与CSS中的编写方式相匹配。在您的例子中，Firefox似乎正在返回带有引号的
url
函数，但Chrome没有。用于提取URL的字符串替换并不需要它们，因此它以围绕URL的引号结束

要解决这个问题，您需要一个更健壮的字符串替换。正则表达式应该可以解决您的问题

src = src.replace(/url\(["']?([^"']*)["']?\)/, "$1");

此正则表达式将使用
URL
声明捕获图像URL，处理
'
或
“
字符（如果存在）

下面是正则表达式各部分的细分

url\(              //Match url(
        ["']?          //Match either " or ' if present.
        ([^"']*)       //Match any characters except " and ' and save them in the $1 variable.
        ["']?          //Match either " or ' if present.
    \)                 //Match )
注意：

如果在外部CSS的
背景图像
属性中使用相对URL，请记住，内联样式将与HTML文档相关，而不是与CSS文档相关。
需要更多信息。JSFIDLE会很好。但是，图像URL可能有问题。它是绝对的还是相对的？向我们打印您要设置的图像的url。抱歉，伙计们，下次我一定会用小提琴开始。@JoãoMosmann图像url是相对的。+1了解浏览器如何以不同方式返回属性，但即使在警报（src）中显示正确的相对url，图像将不会显示，即使它们似乎有正确的路径。@Nick你有我可以查看的实例吗？如果你使用另一个目录中CSS文件的相对链接设置
背景图像
，相对路径在内联时将不正确（因此相对于文档，而不是CSS）哦，天哪，我刚刚设置了JSFIDLE，其中包含指向随机图像的绝对链接，如果是这样的话，这可能会产生误导problem@Nick我的正则表达式中有一个错误。请查看已修复正则表达式的更新答案。除此之外，你的小提琴看起来很有效。非常感谢！我必须在上午再次阅读你对正则表达式的精彩解释宁。
$('.block').click(function(){
    var id = this.id; //Gets clicked block id
    var src = ($(this).css('background-image')); //Gets block image source
    src = src.replace(/url\(["']?([^"']*)["']?\)/, "$1"); //Formats file path

    $('#currentImg').attr('src', src); //I think this is where the issue is
});