How to display images given a full path url fetched from json using angularJS?

Question

I am trying to display the images from a json file. The urls of those images are stored in the json file. Right now given my code, it is just printing out the urls, which it should be, but I am wondering how I can display the actual image on browser instead of the path. The line of code to look at is this <td>{{article.cover_image_path}} </td>

Here is my 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>

my json file looks like this:

try <img ng-src="{{article.cover_image_path}}" />

Claies
– Claies

2017-04-05 00:37:38 +00:00
Commented Apr 5, 2017 at 0:37 — Claies
– Claies, Commented Apr 5, 2017 at 0:37
If my answer satisfies your question, please accept it :)

WilomGfx
– WilomGfx

2017-04-05 00:51:46 +00:00
Commented Apr 5, 2017 at 0:51 — WilomGfx
– WilomGfx, Commented Apr 5, 2017 at 0:51
See AngularJS ng-src API Reference.

georgeawg
– georgeawg

2017-04-05 00:57:25 +00:00
Commented Apr 5, 2017 at 0:57 — georgeawg
– georgeawg, Commented Apr 5, 2017 at 0:57

WilomGfx · Accepted Answer · 2017-04-05 00:58:37Z

1

By adding an img tag with the ng-src directive with the value of your image_path

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

edited Apr 5, 2017 at 0:58

answered Apr 5, 2017 at 0:39

WilomGfx

2,0221 gold badge20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display images given a full path url fetched from json using angularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related