AngularJS图像未显示在屏幕上答案

【问题标题】：AngularJS Images Not Displaying on ScreenAngularJS图像未显示在屏幕上
【发布时间】：2019-04-05 03:35:57
【问题描述】：

图像没有显示在幻灯片轮播的屏幕上。在元素下的控制台中，我清楚地看到了路径：但它们没有显示在屏幕上。有人可以帮忙吗？我在子文件夹中有图像，当我单击文件夹时，图像路径会正确更改。想不通这个谢谢！

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

【问题讨论】：

标签： angularjs image carousel ui.bootstrap

【解决方案1】：

如果路径正在更新并且它们看起来正确，那么这不太可能是 Angular 问题。我的猜测是指定的路径不正确。

从您的代码中，我可以看到您指定的是相对路径（例如 slides/cats/1.jpg），但它是相对于当前路径的。因此，如果您当前的路径是www.mywebpage.com/foo/bar，那么它会期望图像位于www.mywebpage.com/foo/bar/slides/cats/1.jpg。那是你的形象吗？

如果没有，请尝试以下 2 个选项之一。

将/ 添加到路径/slides/cats/1.jpg 的开头。这将使浏览器向www.mywebpage.com/slides/cats/1.jpg 请求图像
指定一个绝对 URL 以确保它来自正确的位置：请参阅此处了解如何获取当前网址：Get current url in Angular

【讨论】：

路径正确，因为它只是转到本地文件夹。我在文档angular-ui.github.io/bootstrap 中发现的唯一内容是图像需要一个 ID，它们由 var currIndex = 0; 分配； $scope.addSlide = function() { var newWidth = 600 + slides.length + 1; slides.push({ image: '//unsplash.it/' + newWidth + '/300', text: ['漂亮的图片','真棒照片','太酷了','我喜欢那个'][ slides.length % 4], id: currIndex++ 需要知道如何动态分配 ID，因为我正在动态加载文件夹。Thx
终于通过添加这个
谢谢！

【解决方案2】：

Carousel 缺少用于查找幻灯片的索引。从 0 开始向幻灯片添加一个 id 属性。这样引导程序可以跳到下一个索引。

将您的 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" 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>

你的 javascript 到：

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

【讨论】：