Javascript Flex滑块在没有图像的情况下移动

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) 当我删除两个链接时,图像显示为列表-_- 我在小提琴上试过,但在手机上没试过 这是

我一直在尝试各种方法来发现为什么图像没有出现在我的IPhone phonegap应用程序的flex滑动条中,我一直在检查链接的顺序和每件事情,但没有图像出现

-当我尝试将flexslider的js&css链接的https更改为http时,这是

-当我将flexslider的js和css链接放到https时,这就是结果,滑块移动时没有图像(https://i.stack.imgur.com/H0c2i.jpg)

  • 当我删除两个链接时,图像显示为列表-_-
我在小提琴上试过,但在手机上没试过 这是相同的链接和每件事

//html

 <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上。