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中会中断（ 当我在select上更改动画时 ），并且出现错误

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, '');