Javascript Flex滑块在没有图像的情况下移动
我一直在尝试各种方法来发现为什么图像没有出现在我的IPhone phonegap应用程序的flex滑动条中,我一直在检查链接的顺序和每件事情,但没有图像出现 -当我尝试将flexslider的js&css链接的https更改为http时,这是 -当我将flexslider的js和css链接放到https时,这就是结果,滑块移动时没有图像(https://i.stack.imgur.com/H0c2i.jpg)Javascript Flex滑块在没有图像的情况下移动,javascript,jquery,html,css,cordova,Javascript,Jquery,Html,Css,Cordova,我一直在尝试各种方法来发现为什么图像没有出现在我的IPhone phonegap应用程序的flex滑动条中,我一直在检查链接的顺序和每件事情,但没有图像出现 -当我尝试将flexslider的js&css链接的https更改为http时,这是 -当我将flexslider的js和css链接放到https时,这就是结果,滑块移动时没有图像(https://i.stack.imgur.com/H0c2i.jpg) 当我删除两个链接时,图像显示为列表-_- 我在小提琴上试过,但在手机上没试过 这是
- 当我删除两个链接时,图像显示为列表-_-
<html>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://*.gstatic.com * ws:;style-src 'self' 'unsafe-inline' https://*.googleapis.com https://*.cloudflare.com data: blob:;media-src *;img-src 'self' http://192.168.1.157 https://*.gstatic.com https://*.googleapis.com data: content:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="css/rtl.jquery.mobile-1.4.5.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css" />
<body>
<div id="markerListPage" data-role="page"> </div>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="js/rtl.jquery.mobile-1.4.5.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.js"></script>
<script src="js/markerdetails.js"></script>
</body>
</html>
//标记详细信息html
<!DOCTYPE HTML>
<html>
<body>
<div id="detailsPage" data-role="page">
<div data-role="content" id="pic">
<div class="flexslider" >
<ul class="slides">
</ul>
</div>
</div>
</div>
</body>
</html>
//detailsmarker页面的javascript
$('#detailsPage').live('pageshow', function (event) {
var id = getUrlVars()["L_ID"];
var serviceURL = "http://192.168.1.157/maleem/";
$.getJSON(serviceURL + 'getimage.php?L_ID=' + id, displayImg);
});
function displayImg(data) {
var imgs = data.pics;
console.log(imgs);
for(var j=0;j<imgs.length;j++)
{
$('.slides').append('<li><img src="' + imgs[j].img + '" width="200" height="200"/></li>');
}
$('.flexslider').flexslider({
animation: "slide",
animationLoop: true
});
}
$('detailsPage').live('pageshow',函数(事件){
var id=getUrlVars()[“L_id”];
var serviceURL=”http://192.168.1.157/maleem/";
$.getJSON(serviceURL+'getimage.php?L_ID='+ID,displayImg);
});
功能显示IMG(数据){
var imgs=data.pics;
控制台日志(imgs);
对于(var j=0;j);
}
$('.flexslider').flexslider({
动画:“幻灯片”,
animationLoop:真
});
}
构建PhoneGap/Cordova应用程序时,您的CSS和JavaScript文件应打包到应用程序中,而不是从在线来源引用。还可以查看白名单插件以允许外部源:即使我将文件存储在我的www文件夹的javascript和css文件夹中,ex:images也不会出现:(图像来自哪里?它们也应该是本地的,或者它们的源域应该是白名单。它们在本地服务器中是本地的我的意思是在应用程序中打包。即使服务器位于您的本地网络中,PhoneGap也会将其视为外部源,并应将其列入白名单。如果您使用的是本地IP地址,请确保您正在测试的设备位于同一LAN上。