在 Angular js 中显示来自 Flick 的图像答案

【问题标题】：Show Images From Flick in angular js在 Angular js 中显示来自 Flick 的图像
【发布时间】：2018-06-11 09:23:49
【问题描述】：

API：

"data": [    
 {
  "accrediationsId": 1,
   "imageURL": "<a data-flickr-embed=\"true\"  href=\"https://www.flickr.com/photos/152241238@N02/25515548558/in/photostream/\" title=\"1\">
   <img src=\"https://farm5.staticflickr.com/4592/25515548558_0cb257389b_o.jpg\" width=\"266\" height=\"79\" alt=\"1\"></a>
   <script async src=\"//embedr.flickr.com/assets/client-code.js\" charset=\"utf-8\"></script>"
 },
 {
  "accrediationsId": 2,
  "imageURL": "<a data-flickr-embed=\"true\"  href=\"https://www.flickr.com/photos/152241238@N02/25515548508/in/photostream/\" title=\"2\">
  <img src=\"https://farm5.staticflickr.com/4728/25515548508_16ab9d0cb4_o.jpg\" width=\"266\" height=\"79\" alt=\"2\"></a>
  <script async src=\"//embedr.flickr.com/assets/client-code.js\" charset=\"utf-8\"></script>"
 },

HTML 代码：

<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in 
            getAffiliationData">
            {{Affiliation.imageURL}}
</div>

需要使用 Angular js 在 html 页面中显示来自 flikr 的图像。是否可以直接从 flikr api 获取图像路径并在 ng-repeat 中显示。

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

使用 image 元素和ng-src

<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in 
            getAffiliationData">
     <img ng-src="{{Affiliation.imageURL}}"> 
</div>

演示

var app =angular.module('testApp',[]);
app.controller('testCtrl',function($scope){

$scope.getAffiliationData = [
 {
            "accrediationsId": 1,
            "imageURL": "https://farm5.staticflickr.com/4592/25515548558_0cb257389b_o.jpg"
 },
 {
            "accrediationsId": 2,
            "imageURL": "https://farm5.staticflickr.com/4728/25515548508_16ab9d0cb4_o.jpg"
  }];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
 <div ng-repeat="Affiliation in 
            getAffiliationData"  ng-click="setClickedRow(user)">
     <img ng-src="{{Affiliation.imageURL}}">   
</div>
 </body>

【讨论】：

问题在于您的图片网址，您需要有一个有效的网址，如上所示

【解决方案2】：

双括号不用于绑定html内容，它们用于渲染文本，渲染html你可以使用这个“ng-bind-html” 试试这个：

<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in getAffiliationData">
   <div ng-bind-html="Affiliation.imageURL"></div>
</div>

你需要注入这个module

这里是demo link

【讨论】：

@RajGujrathi 我添加了演示链接，请尝试一下
非常感谢阿卜杜拉·S·艾哈迈德爵士