我有一个脚本从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,
});
});
答案 0 :(得分:2)
在firefox中使用.css("background-image")
会返回:
"url("URL_PATH")"
而其他浏览器可能会返回此
"url(URL_PATH)"
所以你的问题出现在第一种情况下,你将图像网址设置为:
<img src=""YOUR_URL"">
要解决此问题,您可以在此行中添加替换:
bg = bg.replace('url(', '').replace(')', '').replace(/"/g, '');