AngularJS图像未显示在屏幕上

幻灯片传送带的屏幕上不显示图像。在元素下的控制台中，我清楚地看到了路径：但它们没有显示在屏幕上。有人能帮忙吗？我在子文件夹中有图像，当我单击文件夹时，图像路径会正确更改。搞不清楚这个。非常感谢。

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

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

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

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

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

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

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

相关内容

最新更新

热门标签：