Why are some images on my Flask application not visible when uploaded to Heroku but are visible on localhost?

Question

As stated above, I am unable to figure out why some images on the website aren't being rendered.

I have ensured that the url and filename are in lowercase and I have used the correct url syntax i.e ('/static/img/banner/common-banner.png').

I am receiving a 404 NOT FOUND error when I inspect my code but the images are in the directory.

Please note that most of the invisible images have been referenced in a css file and not directly to the html file.

Here's a sample code:

.banner_area .banner_inner {
  position: relative;
  background: url('/static/img/banner/common-banner.png') no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  min-height: 300px;
  z-index: 1;
}

<!--================Home Banner Area =================-->
<section class="banner_area ">
  <div class="banner_inner overlay d-flex align-items-center">
    <div class="container">
      <div class="banner_content text-center">
        <div class="page_link">
          <a>Home</a>
          <a>About Us</a>
        </div>
        <h2>About Us</h2>
      </div>
    </div>
  </div>
</section>
<!--================End Home Banner Area =================-->

question from:https://stackoverflow.com/questions/66058014/why-are-some-images-on-my-flask-application-not-visible-when-uploaded-to-heroku