将图像传递到Angular UI Bootstrap Carousel

Question

我在项目中使用Angular UI Bootstrap轮播，我想将自己的图像传递到此滑块。 这是我的轮播控制器代码：

.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();
  }
})

我知道初始化了一个新数组，函数addSlide将每个图像添加到该数组并遍历该数组； 但是，我只想将图像的原点更改为项目中的图像文件夹，并且目前无法正常工作，因此无法显示图像。 img文件夹是带有Carousel Controller的.js文件上方的一个文件夹。 因此，如果有任何提示，我将非常高兴，谢谢！

Answer 1

如果要正确调用图像，则最好以/ （而不是../）开头，并了解它是从根Web目录开始的。

因此正确的位置可能是：

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