WordPress API | Get Featured Image URL

Today i was made some experiment with WordPress REST API, all it’s right till i want do get Feateured image URL.
By default wordpress expose Feature image ID instead of URL in API.

"featured_media": 25,

That’s is problem, because, for fetch post you need to do two call, first for get the single post API and one for get single post featured image form “featured_media” ID.

It’s more practise have Feature Image Url ( and links ) exposed in API.
For do that, open the function.php of your theme and add this snippet :

/* Add featured image to REST API */

add_action('rest_api_init', 'register_rest_images' );
function register_rest_images(){
    register_rest_field( array('post'),
        'fimg_url',
        array(
            'get_callback'    => 'get_rest_featured_image',
            'update_callback' => null,
            'schema'          => null,
        )
    );
}
function get_rest_featured_image( $object, $field_name, $request ) {
    if( $object['featured_media'] ){
        $img = wp_get_attachment_image_src( $object['featured_media'], 'app-thumb' );
        return $img[0];
    }
    return false;
}

Basically we go to add “fimg_url” directly to wordpress API.

reload post end point and you see something like this:

"fimg_url": "http://localhost/wpTest/wp-content/uploads/2019/12/847d7f84606089.5d62962644b12.jpg",
        "_links": {
            "self": [
                {
                    "href": "http://localhost/wpTest/wp-json/wp/v2/posts/64"
                }
            ],
            "collection": [
                {
                    "href": "http://localhost/wpTest/wp-json/wp/v2/posts"
                }
            ],
            "about": [
                {
                    "href": "http://localhost/wpTest/wp-json/wp/v2/types/post"
                }
            ],
            "author": [
                {
                    "embeddable": true,
                    "href": "http://localhost/wpTest/wp-json/wp/v2/users/1"
                }
            ],
            "replies": [
                {
                    "embeddable": true,
                    "href": "http://localhost/wpTest/wp-json/wp/v2/comments?post=64"
                }
            ],
            "version-history": [
                {
                    "count": 15,
                    "href": "http://localhost/wpTest/wp-json/wp/v2/posts/64/revisions"
                }
            ],
            "predecessor-version": [
                {
                    "id": 92,
                    "href": "http://localhost/wpTest/wp-json/wp/v2/posts/64/revisions/92"
                }
            ],
            "wp:featuredmedia": [
                {
                    "embeddable": true,
                    "href": "http://localhost/wpTest/wp-json/wp/v2/media/25"
                }
            ],
            "wp:attachment": [
                {
                    "href": "http://localhost/wpTest/wp-json/wp/v2/media?parent=64"
                }
            ],
            "wp:term": [
                {
                    "taxonomy": "category",
                    "embeddable": true,
                    "href": "http://localhost/wpTest/wp-json/wp/v2/categories?post=64"
                },
                {
                    "taxonomy": "post_tag",
                    "embeddable": true,
                    "href": "http://localhost/wpTest/wp-json/wp/v2/tags?post=64"
                }
            ],
            "curies": [
                {
                    "name": "wp",
                    "href": "https://api.w.org/{rel}",
                    "templated": true
                }
            ]
        }

From now you can call featured image as:

<img class="img-fluid" src="post.fimg_url" />;

That’s all.