Post images printing on default blog page - php

Question

When I add a image with either feature image or advanced costume fields on each blog post but the images also appear on my default blog page (index.php).
So my blog has 4 posts. My default blog page is showing the 4 blog posts it also displays the image set to each blog post.
Here's my in the header that displays the image:
if (have_posts()) : while (have_posts()) : the_post();
$attachment_id = get_field('banner_image');
if( get_field('banner_image') ):
$image = wp_get_attachment_image_src( $attachment_id, 'banner' );
?><img src="<?php echo $image[0]; ?>" alt="" width ="<?php echo $image[1]?>" height ="<?php echo $image[2]?>" /><?php
endif;
endwhile;
endif;?>
And then the code printing all my blog posts in index.php:
if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="news-artical">
<?php the_title('<h1>', '</h1>');
the_excerpt();
//var_dump($post);
?> <hr>
</div> <?php
endwhile;
Would really appreciate some help.

Answer 1

All right. The code in your header loops through all displayed posts on each page. If you want to display the image in header only on single post page, you have to wrap it into condition if ( is_single() ) : or if ( is_singular() ) : if you want to display header image also on single page.
if ( is_single() && have_posts()) : while (have_posts()) : the_post();
$attachment_id = get_field('banner_image');
if( get_field('banner_image') ):
$image = wp_get_attachment_image_src( $attachment_id, 'banner' );
?><img src="<?php echo $image[0]; ?>" alt="" width ="<?php echo $image[1]?>" height ="<?php echo $image[2]?>" /><?php
endif;
endwhile;
endif;?>