将图像传递到 Angular UI Bootstrap 轮播

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

如果你想要图片被正确调用，最好以/开头（而不是../）并且明白它是从你的网站根目录开始的。

所以正确的位置可能是：

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

将图像传递到 Angular UI Bootstrap 轮播

Passing images to Angular UI Bootstrap Carousel

javascript

angularjs

angular-ui-bootstrap