Question

问题

我需要连续显示两个不同的图像，但

在我的代码中重复第一张图片
然后在另一行显示第二张图片

我不知道我的代码有什么问题。

<div class="container" ng-controller="dashbordController">
 <div class="row">
  <div class="col-lg-4">
   <div class="thumbnail" ng-repeat="image in images">
    <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
   </div>  
  </div>
  <div class="row">
   <div class="col-lg-4">
    <div class="thumbnail" ng-repeat="image in images">
     <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
    </div>  
   </div>
  </div>
 </div>
</div>
app.controller("dashbordController",function($scope){
$scope.images = [
 {"thumbnail":"./views/img1.png", "description":"Image 01 description"},
 {"thumbnail":"./views/img2.png", "description":"Image 02 description"},
 {"thumbnail":"./views/img1.png", "description":"Image 03 description"},
 {"thumbnail":"./views/img2.png", "description":"Image 04 description"},
 {"thumbnail":"./views/img1.png", "description":"Image 05 description"}
];

});

Answer 1

我们正在使用两个行模板，因此每个缩略图都显示在它自己的行上。

尝试使用此代码：

<div class="container" ng-controller="dashbordController">
<div class="row">
  <div class="col-sm-6" ng-repeat="image in images">
    <div class="thumbnail">
      <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
    </div>
  </div>
</div>

我也改变了col类。使用lg它只适用于高分辨率。希望这样做。

在缩略图中加载图像

1 个答案: