How to display blog images using wordpress in existing project

Short answer: DON’T DO IT! Even if yesterday you said tomorrow!

Including WordPress’s core in some other files is the last thing you want to do. Instead, use an Ajax method and fill the content by using a REST endpoint.

You need to register a rest route first. To do so, add this piece of code into your theme’s functions.php:

add_action( 'rest_api_init', function () {
    register_rest_route( 'vinay', '/ajax_blog/', array(
            'methods' => 'GET', 
            'callback' => 'blog_ajax_function' 
    ) );
});
// Now, you can do your query inside a callback function:
function blog_ajax_function(){
    $recent_posts = wp_get_recent_posts( $args, OBJECT );
    foreach ( $recent_posts as $post=>$value ) {
        $data[$post]['title'] = get_the_title( $value->ID );
        $data[$post]['date'] = get_the_date( 'Y-m-d H:i:s', $value->ID );
        $data[$post]['permalink'] = get_the_permalink( $value->ID );
        $data[$post]['thumbnail'] = get_the_post_thumbnail_url( $value->ID );
    }
    return $data;
}

Now, you can get a JSON response containing title, date and thumbnail of your recent posts by visiting wp-json/vinay/ajax_blog/. Time to add them to our page.

Let’s bind an action to page load and fill the page with fancy bubbly posts, just like spongebob did! This goes in your static website’s HTML file ( Replace the code from your question by removing it and using this ) Don’t forget to change example.com to your domain!

<section id="blog"><div id="container-div"></div></section>
<script>
(function(){
    $.ajax({
        type: 'GET', 
        url: 'http://example.com/wp-json/vinay/ajax_blog', 
        dataType: 'json',
        success: function (data) {
            if (data != null) {
                $.each(data, function(index, element) {
                    $('#container-div').append('<a href="'+element.permalink+'"><img src="'+element.thumbnail+'" alt="'+element.title+'"/><span>'+element.title+'</span>' +element.date+ '</a>');
                });
            }
        }
    });
})(jQuery);
</script>

This will automatically append a list of clickable recent posts to the <div id="container-div"></div> that we create in our HTMl to contain the posts when the page loads.

All done.