Question

我很难解决此问题，我尝试使用a href="_blank"，但是它不会将图像显示到新标签页。有解决方案的人吗？

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
 $scope.newImg = [
        "https://picsum.photos/200",
        "https://picsum.photos/200/300/"];
  }]);

img{
width:70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
  <div ng-repeat="image in newImg">
     <img  ng-src="{{image}}">
  </div>
</div>

Answer 1

您可以关注

<div ng-repeat="image in newImg">
   <img ng-src="{{image}}" ng-click="window.open({{image}}, '_blank');" />
</div>

或

<div ng-repeat="image in newImg">
   <a href="{{image}}" target="_blank"> <img ng-src="{{image}}"/></a>
</div>

Answer 2

<body ng-app="selectExample" ng-controller="ExampleController">
  <div ng-repeat="image in newImg">
      <a ng-href="{{image}}" target="_blank"> <img ng-src="{{image}}"/></a>
  </div>

  <hr>
  <div ng-repeat="image in newImg">
   <img ng-src="{{image}}" ng-click="wopen(image)" />
  </div>

</body>

angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.newImg = [
        "https://picsum.photos/200",
        "https://picsum.photos/200/300/"
  ];

  $scope.wopen = function(image) {
    console.log(image);
    window.open(image,"_blank");
  };
}]);

DEMO on PLNKR。

有关更多信息，请参见

Answer 3

这可以解决问题

<div ng-repeat="image in newImg">
   <a href="{{image}}" target="_blank"> <img ng-src="{{image}}"/></a>
</div>

无论如何要使用ng-repeat在newtab中查看图像？

3 个答案: