Javascript 函数在 chrome 和 safari 中工作，但在 Firefox 中中断

Question

我有一个脚本，它从 api 获取个人资料图片，然后调用将它们组织到网格中的插件。该插件有很多动画类型，因此我创建了一个函数来重新加载它并设置新的动画。

该插件在 li 内查找 img 标签

<li><a href="#"><img src="http://static-cdn.jtvnw.net/jtv_user_pictures/ultimatekingpotato-profile_image-ae8563aeda4ee1c4-300x300.jpeg"/></a></li>

然后将它们转换为带背景的样式。

<a style="background-image: url('http://static-cdn.jtvnw.net/jtv_user_pictures/mathruppenthal-profile_image-8057144b43c310c1-300x300.png'); cursor: default;" id="0" href="#"></a> 

当我从 api 获取图像时，我将它们加载为 img 标签，然后插件进行转换。为了重新加载插件，我克隆图像并将其转换回正常标签，以便插件可以使用新动画重新开始。

这在 Chrome 和 Safari 中工作正常，但在 Firefox 中却出现问题(当我更改选择上的动画时)，并且出现错误

GET 
http://localhost:3000/grid/%22http://static-cdn.jtvnw.net/jtv_user_pictures/wooodus-profile_image-f70bb3ae646de522-300x300.jpeg%22

我不确定它从哪里获取服务器路径并执行此操作？我在这里上传了一个示例，这样你就可以看到它在 chrome 中工作，但在 FF 中它破坏了所有图像 http://178.79.171.188/grid/

这是导致此问题的选择代码

$("#animselect select").change(function(){
    var Grid = $("#twitch-grid-preview").clone();
    $("#twitch-grid-preview").html("").replaceWith(Grid);
    var anchor = $("#twitch-grid-preview").children('ul').find('a');
    anchor.each(function() {

        var bg = $(this).css('background-image');
        bg = bg.replace('url(', '').replace(')', '');
        $(this).parent().append('<a href="#"><img  /></a>');
        $(this).parent().find('a img').attr( 'src' , bg );
        $(this).remove();
    });
    var animPreview = $('#animselect select').val().toLowerCase();
    var clones = $('ul#gridList li').clone();
    $('ul#gridList').append(clones);

    $('#twitch-grid-preview').gridrotator( {
        animType: animPreview,

    });
}); 

Answer 1

在 Firefox 中使用 .css("background-image") 将返回:

"url("URL_PATH")"

而其他浏览器可能会返回此内容

"url(URL_PATH)"

所以你的问题出现在第一种情况下，你将图像网址设置为:

<img src=""YOUR_URL"">

要解决此问题，您可以为此行添加替换:

bg = bg.replace('url(', '').replace(')', '').replace(/"/g, '');