wordpress plugin accessing post info - php

Question

I am a novice to wordpress plugin development. I am trying to access the post information and based on if it is having a featured image I am creating a slide show. But the image url and post title are going out of my div tag. Below is my code.
//function to display post info
function postsinfo_collage_display($attr, $content) {
$plugins_url = plugins_url();
$html = '<div id="pscanvas" class="row">
<div class="row__inner mThumbnailScroller">';
// The Query
query_posts( array ('orderby' => 'date' ) );
// The Loop
while ( have_posts() ) : the_post();
if ( has_post_thumbnail() ) {
$html .= '<div class="tile">
<div class="tile__media">';
$html .='<a href="'.esc_url(get_permalink()).'">';
$html .='<img class="tile__img"';
$html .="src='".esc_url(the_post_thumbnail_url()). "'/>";
$html .='</a></div><div class="tile__details">
<div class="tile__title">';
$html .= the_title();
$html .='</div></div></div>';
}
endwhile;
// Reset Query
wp_reset_query();
$html .= '</div>
</div>
<script>
window.jQuery || document.write(\'<script src="minified/jquery-1.11.0.min.js"><\/script>\')
(function($){
$(window).load(function(){
});
})(jQuery);</script>';
return $html;
}
The output I am getting is:
<div class="entry-content">
http://localhost:9085/wordpress/wp-content/uploads/2016/04/call-of-duty-ghosts-20517-1366x768-1200x675.jpgpscanvashttp://localhost:9085/wordpress/wp-content/uploads/2016/04/Call-Of-Duty-Ghost-Background-For-Wallpaper-652-1200x675.jpgkwofkwc
<div id="pscanvas" class="row">
<div class="row__inner mThumbnailScroller ">
<div id="mTS_1" class="mTSWrapper mTS_horizontal">
<div class="mTSAutoContainer mTSContainer" ">
<div class="tile">
<div class="tile__media">
<a href="http://localhost:9085/wordpress/2016/09/04/pscanvas/">
<img class="tile__img" src=""></a>
</div><div class="tile__details">
<div class="tile__title"></div></div></div>
<div class="tile"><div class="tile__media">
<a href="http://localhost:9085/wordpress/2016/05/03/kwofkwc/">
<img class="tile__img" src=""></a></div><div class="tile__details">
<div class="tile__title"></div></div></div>
</div>
</div>
</div>
</div>
<script>
window.jQuery || document.write('<script src="minified/jquery-1.11.0.min.js"><\/script>')
(function($){
$(window).load(function(){
});
})(jQuery);</script>
<strong>Album Rating:</strong> <div class="genericon genericon-star"></div><br> </div>
I can see the image url should be inside the img tag but its coming out of the entire div tag.

Answer 1

You're using functions that directly output the image and title rather than appending it to your $html variable. You need to switch to functions that return a value instead.
Change the image from:
$html .="src='".esc_url(the_post_thumbnail_url()). "'/>";
To:
$html .= "src='" . esc_url( get_the_post_thumbnail_url() ) . "'/>";
And the title from:
$html .= the_title();
To:
$html .= get_the_title();
Docs:
https://developer.wordpress.org/reference/functions/get_the_title/
https://developer.wordpress.org/reference/functions/get_the_post_thumbnail_url/

Answer 2

Try
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
<img src="<?php echo $url; ?>"/>