我正在尝试显示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>
答案 0 :(得分:1)
通过添加带有image_path
值的ng-src指令的img标记<td><img ng-src="{{article.cover_image_path}}" alt="Description" ></td>