angularjs - WP Rest API + AngularJS : How to grab Featured Image for display on page?

Question

我正在通过 HTTP REST API 插件(这个 wordpress 插件: http://v2.wp-api.org/ )访问 Wordpress 数据。我知道如何获取我的帖子标题，但如何使用此插件显示与该帖子相关的特色图片？我的测试显示了帖子标题和特色图片 ID，但我不确定如何显示实际图片。 Test Example .

这是我的代码:

    <div ng-app="myApp">
    <div ng-controller="Ctrl">
        <div ng-repeat="post in posts | limitTo: 1">
            <h2 ng-bind-html="post.title.rendered"></h2>

            <p>{{ post.featured_image }}</p>

        </div>
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>

<script>

var app = angular.module('myApp', ['ngSanitize']);
    app.controller('Ctrl', function($http, $scope) {
        $http.get("http://ogmda.com/wp/wp-json/wp/v2/posts").success(function(data) {
        $scope.posts = data;
    });
});

</script>

Answer 1

要获得精选图片回复，请添加 _嵌入 在查询字符串上。例子:

http://demo.wp-api.org/wp-json/wp/v2/posts/?_embed

然后，使用 访问返回的 JSON 响应中的特色图像_embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url

var app = angular.module('myApp', ['ngSanitize']);
    app.controller('Ctrl', function($http, $scope) {
        $http.get("http://ogmda.com/wp/wp-json/wp/v2/posts?_embed").success(function(data) {
        $scope.posts = data;

        var firstFeaturedImageUrl = $scope.posts[0]._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url;
    });
});