Static - image rendering returning a HTTP 404 error in Django 1.9.1

Question

I am a beginner in Django and am having an issue with a template rendering an image url from the database. The image paths for my other images work fine. hard coded also works fine rendering my other images.Ex:

<img class="img-responsive logo" src="{% static 'media/images/logo.png' %}" alt="logo" />

but when I use this format or hardcode in template:

{%for m in users%}
 <img src="{% static 'media/{{m.image}}' %}" alt="{{m}}" />
{%endfor %}

I get no image rendered and the following error when I inspect element (chrome):

http://127.0.0.1:8000/static/media/%7B%7Bm.image%7D%7D 
Failed to load resource: the server responded with a status of 404 (Not Found)

as you can see in the 404 error the "squiggly brackets" aren't being processed.

I should note that when I do:

{{m.image}}

the saved url in the database returns the path of the image as saved in the database. I used the ImageField() in my model.

my settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS =    ['/Users/coreygumbs/Documents/Ibhuku/IbhukuProject2/ibhuku/static/',]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static')

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static', 'media')

my root urls.py

urlpatterns = [
        #HomeView class is the homepage template
        url(r'^$', HomeView.as_view(), name='home'),
        url(r'^admin/', admin.site.urls),
        url(r'^accounts/', include('accounts.urls', namespace='accounts')),
] 

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

my template code

{% extends "_profilebase.html" %}
{% load staticfiles %}
{% block profile %}

<div class="accountsProfile">
    {% for m in Users%}
        <h3>{{m}}</h3>
        {{m.first_name}} {{m.last_name}}<br/>
        {{m.username}}<br/>
        {{m.image}}<br/>
        <img src="{% static 'media/{{m.image}}' %}" alt="{{m}}" />
    {% endfor %}
</div>
{% endblock profile %}

I have also used "collectstatic"

any help or advice would be greatly appreciated. Thanks in advance.

score 2 · Accepted Answer · answered Jan 19 '16 at 05:25

2

You have some template tags you can use:

Argument         Outputs
openblock          {%
closeblock         %}
openvariable       {{
closevariable      }}
openbrace           {
closebrace          }
opencomment        {#
closecomment       #}

so you have a variable inside a block, first thing to know is You don't put the brackets around variables when you use them in template tags, the solution for the problem would be concatenating the image name string, that you can use add: for that, like this :

<img src="{% static "media/"|add:m.image %}" />

answered Jan 19 '16 at 05:25

P3zhman

243
3
12

I want to say thank you I appreciate your help. I had just finished reading this in the docs. I will try it and see how it goes. – Corey Gumbs Jan 19 '16 at 06:27
I tried as you suggested with the |add: but that did not work. I am going to keep studying this so I can write a cleaner option than the one that worked for me as I listed in this thread. i appreciate your help. – Corey Gumbs Jan 19 '16 at 06:54
Just use {{m.image}} in the template, what will it return? – P3zhman Jan 19 '16 at 06:56
it returns the path that was saved to the database in string format. – Corey Gumbs Jan 19 '16 at 06:57
Can u comment the output? – P3zhman Jan 19 '16 at 06:58
when I place {{m.image}} this is what I get in the browser: user_WebDev/1914567_10205781490716222_6342284784855252927_n.jpg – Corey Gumbs Jan 19 '16 at 07:00
Can u access 127.0.0.1:8000/[your static url]/media/user_WebDev/[your image name] in browser? – P3zhman Jan 19 '16 at 07:04
another thing to know is that you used `MEDIA_URL`, so you should use the `{{ MEDIA_URL }}` instead of `"media/"` – P3zhman Jan 19 '16 at 07:20
ok. thanks for that advice. I saw that being used in older stack posts, I didn't see that being used in the docs/tutorial and assumed that the newer versions didn't use the tag. – Corey Gumbs Jan 19 '16 at 16:47

score 0 · Answer 2 · edited May 23 '17 at 12:16

I actually found the answer that works for me right in the docs. Here is a link just in case anyone wants to check it out.

https://docs.djangoproject.com/en/1.9/ref/templates/builtins/#std:templatetag-static

also I found this answer as well: django 1.5 - How to use variables inside static tag

Between those two links I was able to come up with this and it worked:

{%for user in Users%}
    {%static  "/media/" as image_url %}
    <img class='img responsive' src='{{image_url}}{{user.image}}'/>
{%endfor%}

I know there is probably a cleaner way to do this. Hopefully someone will still add to this thread for future use. Thank you to everyone who offered their assistance.

Static - image rendering returning a HTTP 404 error in Django 1.9.1

2 Answers2