'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 |
|---|
