How to put an image inside the wordpress loop?

Question

HTML

Hello! There is a standard loop in wordpress . Interested in how it is inside the standard announcement cycle (limit of 7 articles)

<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>

<li> 
  <span class="li--span"><span class="li--span--category"><?php the_category( ', ' ); ?></span></span>   
  <a href="<?php the_permalink() ?>" class="li--a">                                        
    <span class="little_content"><?php the_title(); ?></span>   
  </a>                                
</li>

<?php endwhile; ?>

Display the image after the 4th announcement, i.e. there should be 4 entries - picture - 3 more entries after

<a href="#"><img src="<?php echo get_template_directory_uri() ?>/img/advertisement.jpg" width="300" height="500" title="Перейти на сайт рекламодателя" /></a>

Answer 1

<?php $i = 1; if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<li> 
  <span class="li--span"><span class="li--span--category"><?php the_category( ', ' ); ?></span></span>   
  <a href="<?php the_permalink() ?>" class="li--a">                                        
    <span class="little_content"><?php the_title(); ?></span>   
  </a>                                
</li>
<?php if ( $i == 4 ) { echo 'картинка'; } ?>">
<?php $i++; endwhile; ?>