'Images are working fine in local host but are broken when launching from herokuapp

I am using Django 4.0.3 to build up a project and is working fine on local host but when launched from herokuapp

Heroku log:

2022-04-01T15:08:14.419520+00:00 app[web.1]: Not Found: 
/static/images/logo.png

2022-04-01T15:08:14.419963+00:00 app[web.1]: 10.1.81.65 - - 
[01/Apr/2022:15:08:14 +0000] "GET /static/images/logo.png 
HTTP/1.1" 404 2732 "https://taskmate-todo.herokuapp.com/" 
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.84 
Safari/537.36"

2022-04-01T15:08:14.462011+00:00 app[web.1]: Not Found: 
/static/images/stickynotes-2.jpg

2022-04-01T15:08:14.462385+00:00 app[web.1]: 10.1.61.157 - - 
[01/Apr/2022:15:08:14 +0000] "GET /static/images/stickynotes- 
2.jpg HTTP/1.1" 404 2759 "https://taskmate-todo.herokuapp.com/" 
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.84 
Safari/537.36"
2022-04-01T15:08:14.465191+00:00 app[web.1]: Not Found: 
/static/images/stickynotes-1.jpg

2022-04-01T15:08:14.465626+00:00 app[web.1]: 10.1.52.208 - - 
[01/Apr/2022:15:08:14 +0000] "GET /static/images/stickynotes- 
1.jpg HTTP/1.1" 404 2759 "https://taskmate-todo.herokuapp.com/" 
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.84 
Safari/537.36"
2022-04-01T15:08:14.784889+00:00 app[web.1]: Not Found: 
/static/images/stickynotes.jpg

2022-04-01T15:08:14.785283+00:00 app[web.1]: 10.1.81.65 - - 
[01/Apr/2022:15:08:14 +0000] "GET /static/images/stickynotes.jpg 
HTTP/1.1" 404 2753 "https://taskmate-todo.herokuapp.com/" 
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.84 
Safari/537.36"

Project Description:

taskmate
 static
 staticfiles
 taskmate
 templates
 todolist_app
 users_app
 .gitignore
 manage.py
 Procfile
 requirements.txt

snippet from settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),) 
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

for STATICFILES_DIRS I used both tuple and list but nothing changes

html code:

{% extends 'base.html' %}
{% load static %}

{% block title %}
<title>Welcome to Taskmate</title>
{% endblock title %}

{% block content %}
<div class='container'>
    <div class="row mt-5">
        <div class="col-lg-4">
            <img src="{% static 'images/stickynotes-1.jpg' %}" 
class="shadow rounded" alt="Image-1" width="360" height="250">
        </div>
        <div class="col-lg-4">
            <img src="{% static 'images/stickynotes-2.jpg' %}" 
class="shadow rounded" alt="Image-2" width="360" height="250"> 
        </div>
        <div class="col-lg-4">
            <img src="{% static 'images/stickynotes.jpg' %}" 
class="shadow rounded" alt="Image-3" width="360" height="250"> 
        </div>
    </div>
    <div class="row mt-5 text-center">
        <div class="col-md-10 offset-md-1">
            <p class="h1 text-primary">Quick and easy to use, 
               Anytime, Anywhere!!</p>
            <p class="h3 mt-3">"Plan your day better, get your life 
Organised!"</p>
            <p class="h5">TASKMATE Lets you keep your Task in one 
place</p>
            <a href="{% url 'todolist' %}"><button type="button" 
class="shadow btn btn-primary btn-lg mt-5 rounded">Let's Get 
Started!</button></a>
        </div>
    </div>
</div>
{% endblock content %}

Here's link of project: https://taskmate-todo.herokuapp.com



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source