Django 2.0 throws AttributeError: ''Image' object has no attribute 'replace'" - django

Question

When trying to set an html image to my static path + image path in Django 2.0, the django development server displays the following error:
Error during template rendering
In template /Users/arikanevsky/webappgit/ari/templates/ari/software.html, error at line 5
'Image' object has no attribute 'replace'
The Image class from models.py:
class Image(models.Model):
"""This class contains a reference to the ImageField.
It is part of a base of models comprising the webapp.
"""
uplpath = '%Y/%m/%d'
dfltpath = 'page_images/Y/M/D/no_img.jpg'
image = models.ImageField(upload_to=uplpath, default=dfltpath)
def __str__(self):
"""Return human readable string of self.image."""
return self.image.name
The urlpatterns from urls.py:
urlpatterns = [
path('', views.index, name='index'),
path('<int:page_id>/bio/', views.bio, name='bio'),
path('<int:page_id>/software/', views.software, name='software'),
path('<int:page_id>/publications/',
views.publications, name='publications'),
path('<int:page_id>/career/', views.career, name='career'),
path('<int:page_id>/education/', views.education, name='education'),
]
The index method from views.py:
def index(request):
page_list = get_list_or_404(Page.objects.all())
return render(request, 'ari/index.html', {'page_list': page_list})
The index.html file (it is used as named):
{% if page_list %}
<ul>
{% for page in page_list %}
<p>My bio page</p>
<p>My career page</p>
<p>My software page</p>
<p>My publication page</p>.
{% endfor %}
</ul>
{% else %}
<p>No pages are available :(</p>
{% endif %}
The software method from views.py:
def software(request, page_id):
software_page = get_object_or_404(Page, pk=page_id)
return render(request, 'ari/software.html', {'software_page': software_page})
The software.html file:
{% load static %}
<img src = "{% static software_page.image %}" alt = "Profile Picture"/>
The app directory structure is the following:
(I believe we can ignore the .ipynb and pycache dirs)
|-akanev
| |-__pycache__
|-ari
| |-.ipynb_checkpoints
| |-__pycache__
| |-migrations
| | |-__pycache__
| |-templates
| | |-ari
| | | |-page_images
The relevant environment dir paths defined in settings.py:
MEDIA_ROOT: '/Users/arikanevsky/webappgit/ari/templates/ari/page_images'
MEDIA_URL: ''
BASE_DIR: '/Users/arikanevsky/webappgit'
STATICFILES_DIRS: []
STATIC_ROOT: None
STATIC_URL: '/page_images/'
TEMPLATES:
[{'APP_DIRS': True,
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'OPTIONS': {'context_processors': ['django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages']}}]
The img src line in the software.html file throws the error:
Exception Type: AttributeError at /ari/4/software/
Exception Value: 'Image' object has no attribute 'replace'
Would appreciate any and all clues to as what this mysterious error may be!
Thanks :)

Answer 1

You are using the static template tag wrong. It should be used for static files that you want to use on your pages. For example linking to a stylesheet, javascript or images that aren't user uploaded.
See here for more information:
https://docs.djangoproject.com/en/2.0/howto/static-files/
You are trying to get the picture from an uploaded file in your models -
probably done by a user upload (or done in a way that isn't "static"). This is handle via the media url and media root settings. See here:
https://docs.djangoproject.com/en/2.0/topics/files/
The correct way to get the image would be:
<img src = "{{ software_page.image.url }}" alt = "Profile Picture"/>
Best regards,
Andréas