rn-carousel沒有在屏幕上顯示圖像

我正在使用rn-carousel進行圖像滑動。但我無法在screen.i中顯示圖像意味着在設備上創建應用程序圖像後圖像不顯示，任何人都可以提示我需要做的。平板幫助我....謝謝。rn-carousel沒有在屏幕上顯示圖像

的index.html

<link href="css/angular-carousel.css" rel="stylesheet" type="text/css" /> 
    <script src="lib/angular-touch/angular-touch.js"></script> 
    <script src=" https://cdnjs.cloudflare.com/ajax/libs/angular-carousel/1.0.1/angular-carousel.js"></script> 


<ul rn-carousel class="image"> 
    <li ng-repeat="slide in slides"> 
     <div class="layer"> 

      <img ng-src="{{slide.image}}" > 

     </div> 
    </li> 
</ul>

app.js： -

angular.module('starter', ['ionic','angular-carousel']) 

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
     // for form inputs) 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

     // Don't remove this line unless you know what you are doing. It stops the viewport 
     // from snapping when text inputs are focused. Ionic handles this internally for 
     // a much nicer keyboard experience. 
     cordova.plugins.Keyboard.disableScroll(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 
.controller('CarouselController', function($scope) { 

    $scope.slides = [{ 
     "image": "http://rack.3.mshcdn.com/media/ZgkyMDEzLzA2LzEzL2EwL0NvbG9yZnVsQmlyLmQ1ZDIzLmpwZwpwCXRodW1iCTEyMDB4NjI3IwplCWpwZw/fd72a0e8/160/Colorful-Bird.jpg" 


    }, { 

     "image": "https://i.ytimg.com/vi/Dbo3eoNN5tc/maxresdefault.jpg" 

    }, { 


     "image": "http://www.birds.com/wp-content/uploads/home/bird.jpg" 
    }, { 

     "image": "https://i.ytimg.com/vi/Dbo3eoNN5tc/maxresdefault.jpg" 

    }, { 

     "image": "https://upload.wikimedia.org/wikipedia/en/f/f3/Batmananimated32.png" 

    }, { 

     "image": "http://weknowyourdreamz.com/images/batman/batman-02.jpg" 

    } 



] 




});

來源

2016-02-15 Ashish Kumar

也許不是嘗試這樣的事：

有一個工作示例：http://plnkr.co/edit/VruPSSkVK47YgeUwYO7l?p=preview HTML：

<!DOCTYPE html> 
<html ng-app="myApp"> 

<head> 
    <title>Building Angular Directives</title> 
    <link href="css/angular-carousel.min.css" rel="stylesheet" type="text/css" /> 
    <style> 
     ul { 
      height:300px; 
      width: 600px; 
      background:blue; 
     } 
     img.alignLeft { 
      float: left; 
     } 
    </style> 

    <!-- Angular Components --> 
    <script type="text/javascript" src="angular/angular.js"></script> 
    <script type="text/javascript" src="angular/angular-touch.js"></script> 
    <script type="text/javascript" src="angular/angular-carousel.js"></script> 

    <!-- App definition --> 
    <script type="text/javascript" src="app.js"></script> 

    <!-- Controllers --> 
    <script type="text/javascript" src="controllers/my-controllers.js"></script> 
</head> 

<body> 
    <div ng-controller="HomeController"> 
     <ul rn-carousel rn-carousel-controls class="image"> 
      <li ng-repeat="images in kittens"> 
       <div ng-repeat="image in images"> 
        <img class="alignLeft" ng-src="{{image}}"/> 
       </div> 
      </li> 
     </ul> 
     <hr/> 
     <ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="slide" class="image"> 
      <li ng-repeat="images in kittens"> 
       <div ng-repeat="image in images"> 
        <img class="alignLeft" ng-src="{{image}}"/> 
       </div> 
      </li> 
     </ul> 
     <hr/> 
     <ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="zoom" class="image"> 
      <li ng-repeat="images in kittens"> 
       <div ng-repeat="image in images"> 
        <img class="alignLeft" ng-src="{{image}}"/> 
       </div> 
      </li> 
     </ul> 
     <hr/> 
     <ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="hexagon" class="image"> 
      <li ng-repeat="images in kittens"> 
       <div ng-repeat="image in images"> 
        <img class="alignLeft" ng-src="{{image}}"/> 
       </div> 
      </li> 
     </ul> 
     <hr/> 
     <ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="slideAndFade" class="image"> 
      <li ng-repeat="images in kittens"> 
       <div ng-repeat="image in images"> 
        <img class="alignLeft" ng-src="{{image}}"/> 
       </div> 
      </li> 
     </ul> 
     <hr/> 
     <ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="none" class="image"> 
      <li ng-repeat="images in kittens"> 
       <div ng-repeat="image in images"> 
        <img class="alignLeft" ng-src="{{image}}"/> 
       </div> 
      </li> 
     </ul> 
     <hr/> 
    </div> 
</body>

首頁控制器：

$scope.kittens = [ 
     ['http://placekitten.com/g/200/300','http://placekitten.com/g/200/301','http://placekitten.com/g/200/303'], 
     ['http://placekitten.com/g/200/301','http://placekitten.com/g/200/303','http://placekitten.com/g/200/300'], 
     ['http://placekitten.com/g/200/303','http://placekitten.com/g/200/300','http://placekitten.com/g/200/301'] 
];

來源

2016-02-15 11:22:24 whitesova93

我沒有得到任何錯誤，但是當我去除NG-SRC納克那麼它的顯示圖像404網址錯誤.. –

http://192.168.0.115:8100/%7B% 7Bslide.image％7D％7D 404（Not Found）..？ionicplatform = android：72 GET –

看看上面的答案我希望它能幫助你！ – whitesova93

rn-carousel沒有在屏幕上顯示圖像

回答

相關問題