给定使用 angularJS 从 json 获取的完整路径 url，如何显示图像？答案

【问题标题】：How to display images given a full path url fetched from json using angularJS?给定使用 angularJS 从 json 获取的完整路径 url，如何显示图像？
【发布时间】：2017-04-05 00:35:48
【问题描述】：

我正在尝试显示 json 文件中的图像。这些图像的 url 存储在 json 文件中。现在给定我的代码，它只是打印出应该是的 url，但我想知道如何在浏览器上显示实际图像而不是路径。要查看的代码行是<td>{{article.cover_image_path}} </td>

这是我的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 文件如下所示：

【问题讨论】：

试试<img ng-src="{{article.cover_image_path}}" />
如果我的回答满足你的问题，请采纳:)
见AngularJS ng-src API Reference。

标签： javascript html angularjs json

【解决方案1】：

通过使用带有 image_path 值的 ng-src 指令添加 img 标签

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

【讨论】：