如何顯示圖像給定從json使用angularJS獲取的完整路徑url？

我試圖從json文件顯示圖像。這些圖像的網址存儲在json文件中。現在給我的代碼，它只是打印出它應該是的url，但我想知道如何在瀏覽器上顯示實際圖像而不是路徑。代碼來看看該生產線是該<td>{{article.cover_image_path}} </td>如何顯示圖像給定從json使用angularJS獲取的完整路徑url？

這裏是我的html：

<html ng-app="myApp"> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
    <script> 
     var myApp = angular.module('myApp', []); 
     myApp.controller('myCtrl', function ($scope, $http){ 
     $http.get('articles.json').success(function(data) { 
      $scope.articles= data; 
     }); 
     }); 
    </script> 
    </head> 
    <body ng-controller="myCtrl"> 
    <table> 
     <tr> 
     <tr ng-repeat="article in articles"> 
     <td>{{article.title}}</td> 
      <td>{{article.source}}</td> 
     <td>{{article.publish_time}}</td> 
     <td>{{article.cover_image_path}} </td> 
     </tr> 
    </table> 
    </body> 
</html>

我的JSON文件看起來像這樣：

來源

2017-04-05 Kat

嘗試'' – Claies

如果我的答案滿足您的問題，p租用接受:) – WilomGfx

請參閱[AngularJS ng-src API參考]（https://docs.angularjs.org/api/ng/directive/ngSrc）。 – georgeawg

通過與NG-SRC指令添加img標籤與您的image_path的值

<td><img ng-src="{{article.cover_image_path}}" alt="Description" ></td>

來源

2017-04-05 00:39:40 WilomGfx

如何顯示圖像給定從json使用angularJS獲取的完整路徑url？

回答

相關問題