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

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 %}
    <a href="/ari/{{page.id}}/bio"><p>My bio page</p></a>
    <a href="/ari/{{page.id}}/career"><p>My career page</p></a>
    <a href="/ari/{{page.id}}/software"><p>My software page</p></a>
    <a href="/ari/{{page.id}}/publications"><p>My publication page</p>. </a>
{% 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