card-img not display the_post_thumbnail()

I want the thumbnail to be displayed on the card as shown in the first part of my code

<!--Diseño 2-->
<?php $posts = get_posts(array('posts_per_page' => 5)); ?>

<div class="container text-center">
<h3>Diseño general</h3>
    <div class="row">
        <div class="col-md-4">
            <div class="card bg-dark text-white">
  <img src="https://es.unesco.org/sites/default/files/ai-conference-middle.jpg" class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
        </div>
    </div>
</div>

<!-- Noticias -->

<div class="container text-center p-3">
  <!-- Sección que muestra las primeras 3 entradas -->
  <?php
  $args = array(
    'category_name' => 'Noticias',
    'posts_per_page' => 1
  );
  $news_query = new WP_Query($args);
  ?>
  <h3>Diseño individual</h3>
  <div class="container">
    <div class="row">
      <?php
      if ($news_query->have_posts()) :
        while ($news_query->have_posts()) :
          $news_query->the_post();
      ?>
          <div class="col-sm-12 col-md-6 col-lg-4 mb-4 align-items-center">
            <div class="card text-light card-has-bg click-col">

              <div class="card-img-overlay d-flex flex-column">
                <div class="card-body">

                  <h4 class="card-title mt-0 "><a class="text-light" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                  <small><i class="far fa-clock"></i> <?php the_date('j F Y');?></small>
                </div>
                <div class="card-footer">
                  <div class="media">
                    <div class="media-body">
                      <h6 class="my-0 text-light d-block">Nombre Autor</h6>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      <?php
        endwhile;
      endif;
      wp_reset_postdata();
      ?>
    </div>
  </div>
  <br><br>
  <a href="https://catedra-unesco-uneir.org/category/noticias" class="btn btn-uneir">Ver más</a>
</div>

I do the conversion from img src to the_post_thumbnail but I don't get the result I need, I wait for your answers.
The results of each code can be found at the following URL: cognicion.com.mx

I also leave you a screenshot:
enter image description here

i am not quite sure if i understand your question. you have to add the_post_thumbnail(); in your code. more info you can find here:

Wordpress Post Thumbnail reference

<div class="container text-center">
<h3>Diseño general</h3>
    <div class="row">
        <div class="col-md-4">
            <div class="card bg-dark text-white">
  <img src="https://es.unesco.org/sites/default/files/ai-conference-middle.jpg" class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>

    <!-- Display post thumbnail here -->
    <?php the_post_thumbnail('full', ['class' => 'card-img']); ?>

  </div>
</div>
        </div>
    </div>
</div>

the ['class' => 'card-img'] array adds the card-img class to the thumbnail. you can modify the CSS as you want.