0

Images are not displaying on screen for slideshow carousel. In the console under elements, I clearly see the path: but they are not showing on the screen. Could someone please help with this? I have the images in subfolders and when i click a folder the image paths change correctly. Can't figure this one out. Thank you!

index.html

  <!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="CarouselDemoCtrl">
  <div style="height: 305px">
    <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
      <div uib-slide ng-repeat="slide in slides">
        <img ng-src="{{uri}}/{{currentFolder}}/{{slide}}" style="margin:auto;">

        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="navbar navbar-default navbar-fixed-botom" role="navigation">
      <div class="container">
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li ng-repeat="folder in folders" ng-class="{active:activeFolder(folder)}" ng-click="selectFolder(folder)">
              <a ng-href="#{{folder}}">{{folder}}</a>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

  </div>
</div>
  </body>
</html>

example.js

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 5000;
  $scope.noWrapSlides = false;
  $scope.active = 0;

  var currentIndex = 0;

  $scope.uri = "slides";
    $scope.folders = ['cats','dogs'];
    $scope.slides = ["1.jpg","2.jpg","3.jpg"];
    $scope.currentFolder = $scope.folders[0];
    $scope.selectFolder = function (folder) {
      $scope.currentFolder = folder;
    };
    $scope.activeFolder = function (folder) {
      return (folder === $scope.currentFolder);
    };
});
Ginger22
  • 147
  • 2
  • 12

2 Answers2

1

If the paths are updating and they look correct, then this is unlikely to be an Angular problem. My guess is that the path that's specified is not correct.

From your code I can see that you're specifying a relative path (e.g. slides/cats/1.jpg), but it's relative to the current path. So, if your current path is www.mywebpage.com/foo/bar, it would expect the image to be at www.mywebpage.com/foo/bar/slides/cats/1.jpg. Is that where your image is?

If not, try one of these 2 options.

  1. Add a / to the beginning of the path /slides/cats/1.jpg. That'll get the browser to request the image from www.mywebpage.com/slides/cats/1.jpg
  2. Specify an absolute URL to be super extra sure it's coming from the right place: See here for how to get the current url: Get current url in Angular
HankScorpio
  • 3,612
  • 15
  • 27
  • The path is correct, as it just goes to local folders. The only thing i found in the documentation https://angular-ui.github.io/bootstrap/ is that the images need an ID,which they assign by var currIndex = 0; $scope.addSlide = function() { var newWidth = 600 + slides.length + 1; slides.push({ image: '//unsplash.it/' + newWidth + '/300', text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4], id: currIndex++ Need to know how to dynamically assign an ID since i'm dynamically loading with folders. Thx – Ginger22 Nov 01 '18 at 01:46
  • Finally got it to work by adding this
    Thank you!
     – Ginger22 Nov 01 '18 at 02:21
1

Carousel is missing an index to find your slides. Add an id property to your slide, starting at 0. This way bootstrap can skip to the next index.

Change your HTML to:

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div ng-controller="CarouselDemoCtrl">
    <div style="height: 305px">
        <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
            <div uib-slide ng-repeat="slide in slides" index="slide.id">
                <img ng-src="{{uri}}/{{currentFolder}}/{{slide.image}}" style="margin:auto;">
                </img>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="navbar navbar-default navbar-fixed-botom" role="navigation">
                <div class="container">
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li ng-repeat="folder in folders" ng-class="{active:activeFolder(folder)}" ng-click="selectFolder(folder)">
                            <a ng-href="#{{folder}}">{{folder}}</a>
                            </li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

And your javascript to:

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;

var currentIndex = 0;

$scope.uri = "slides";
    $scope.folders = ['cats','dogs'];
    $scope.slides = [{image:"1.jpg", id:0},{image: "2.jpg", id:1},{image:"3.jpg", id:2}];
    $scope.currentFolder = $scope.folders[0];
    $scope.selectFolder = function (folder) {
    $scope.currentFolder = folder;
    };
    $scope.activeFolder = function (folder) {
    return (folder === $scope.currentFolder);
    };
});
Wouter van Rij
  • 198
  • 1
  • 10