将图像传递到Angular UI Bootstrap Carousel

Question

I am using the Angular UI Bootstrap carousel in a project and I would like to pass own images to this slider. This is my code for the Carousel Controller:

.controller('CarouselCtrl', function ($scope) {
  $scope.myInterval = 2000;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 1 + slides.length + 1;
    slides.push({
      image: '../img' + newWidth,
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
      ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };
  for (var i=0; i<4; i++) {
    $scope.addSlide();
  }
})

I understand that a new array is initialised and the function addSlide adds each image to the array and iterates throught this array; however, I just want to change the origin of the images to the image folder in the project and it is not working by now, the images are not displayed. The img folder is one folder above the .js-file with the Carousel Controller. So I would be very happy for any hint, thanks!

Answer 1

If you want the images to be called correctly, it is best to start with / (instead of ../) and understand that it is starting at your root web directory.

So the correct location might be:

slides.push({
  image: '/images/img' + newWidth,
  text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
    ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});