CODEWITHSUNDEEP
javascripthtmlangularjsjson
Kat
Kat

Reputation: 37

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

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: enter image description here

Upvotes: 0

Views: 1076

Answers (1)

WilomGfx
WilomGfx

Reputation: 2013

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>

Upvotes: 1

Related Questions