How to view images from folder in flask web app?

Question

I had this issue when I first started on most of the pictures, only one showed on my web page so I uploaded the pictures to a google drive and used each url. It worked but the pictures loaded slowly so I went to try the pictures in a folder thing again and they all show with the alt tag and a broken image icon.

    {% extends "base.html" %} {% block title %}Home{% endblock %}

{% block content%}  

<main role="main">

  <div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin-top:25px;">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="svg-wrapper background-image" style="background-image: url('../images/smiling_five_blue_uniform.jpg'); -webkit-background-composite: border; background-size: cover;">
        <!-- <img src="../images/smiling_five_blue_uniform.jpg" class="d-block w-100" alt="KG2 children smiling in school uniform outside TH."> -->
        <!-- <img src="https://www.drive.google.com/uc?id=1r-pe153xqSnx08uRzVByAIgXuDmYcLHV" class="d-block w-100" alt="KG2 children smiling in school uniform outside TH."> -->
        <svg class="bd-placeholder-img" style="background-image: url('../images/smiling_five_blue_uniform.jpg')" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/>
        </svg>
        </div>
        <div class="container">
          <div class="carousel-caption text-left">
            <h1>Welcome to Towering Heights Group of Schools</h1>
            <p>This is the official website for the Towering Heights group of Schools in Akure, Ondo State.</p>
            <p><a class="btn btn-lg btn-primary" href="/about" role="button">See what we're about</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <img src="../images/green_dress_girl.JPG" class="d-block w-100" alt="Children engageing with each other in non-uniform."/>
        <!-- <img src="https://www.drive.google.com/uc?id=1tUXIMfDEUmmo5O4yX2ITmJ0-h87XKzW6" class="d-block w-100" alt="Children engageing with each other in non-uniform."> -->
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
        <div class="container">
          <div class="carousel-caption">
            <h1>Another home for your kids</h1>
            <p>We have a warm, safe, secure environment where children have the opportunity 
              to develop a love of learning and independence.</p>
            <p><a class="btn btn-lg btn-primary" href="/contact" role="button">Get in touch today!</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <img src="../images/kids_roundtable.jpg" class="d-block w-100" alt="Children playing at a classroom table inside TH."/>
        <!-- <img src="https://www.drive.google.com/uc?id=1NRC2t0FnsJo2gTz_PSmZkA92l-szX2cL" class="d-block w-100" alt="Children playing at a classroom table inside TH."> -->
        <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"/></svg>
        <div class="container">
          <div class="carousel-caption text-right">
            <h1>Admissions are currently ongoing.</h1>
            <p>Ensure your child gets the best possible education.</p>
            <p><a class="btn btn-lg btn-primary" href="/contact" role="button">Get in touch today</a></p>
          </div>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</main>  



  <!-- Marketing messaging and featurettes
  ================================================== -->
  <!-- Wrap the rest of the page in another container to center all the content. -->

  <div class="container marketing" style="width:800px; margin:0 auto;"> 
    <!-- Three columns of text below the carousel --> 
      <div class="container-fluid" style="margin-top:50px;">
        <!-- Example row of columns -->
        <div class="row"  >
          <div class="col-lg-4">
            <h2>Admissions</h2>
            <p>Choosing the right school marks a new beginning in the life of your child.<br>
              Contact us as early as possible to have your child assessed and ready for school. </p>
            <p><a class="btn btn-secondary" href="/contact" role="button">View details &raquo;</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <h2>Calendar</h2>
            <p>Terms, exams, holidays, keep up to date on what's hapenning when so you don't fall behind. </p>
            <p><a class="btn btn-secondary" href="/calendar" role="button">View details &raquo;</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <h2>Latest News</h2>
            <p>Check out what's been happening at THS</p>
            <p><a class="btn btn-secondary" href="/news" role="button">View details &raquo;</a></p>
          </div><!-- /.col-lg-4 -->
        </div><!-- /.row -->

        <hr>

      </div> <!-- /container -->

{% endblock %}