2017-04-05 8 views
0

jsonファイルから画像を表示しようとしています。これらの画像のURLはjsonファイルに保存されます。今は自分のコードを与えて、URLを印刷しているだけですが、パスの代わりにブラウザに実際のイメージを表示する方法が不思議です。見てコードの行は、ここで<td>{{article.cover_image_path}} </td>angularJSを使用してjsonからフェッチしたフルパス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ファイルは、次のようになります。NG-srcのディレクティブでimgタグを追加することにより enter image description here

+0

試し '' – Claies

+0

私の答えはあなたの質問を満たしている場合、pの値を持ちますリース受け付ける:) – WilomGfx

+0

[AngularJS ng-src APIリファレンス](https://docs.angularjs.org/api/ng/directive/ngSrc)を参照してください。 – georgeawg

答えて

1

あなたのIMAGE_PATH

<td><img ng-src="{{article.cover_image_path}}" alt="Description" ></td> 
関連する問題