0

I am a newbie on Django and I am having problems on displaying images on my django HTML template/forms. Actually,I cannot display them. I've already followed the resolution stated on this stackoverflow question/link - How do I include image files in Django templates?

However,when I'm still getting a broken image on my browser everytime I test it. Below are partial contents of the files related to my application (which can be of great help for pinpointing what's wrong):

--- settings.py ---

# Media and images used by the templates
MEDIA_ROOT = '/home/acresearch/djangoProjects/fringe/fringe/images'
MEDIA_URL = 'http://localhost:8000/images/'

--- urls.py ---

urlpatterns = patterns('',
               (r'^submit/$', submit),
                       (r'^receipt/$', receipt),
                       (r'^images/(?P<path>.*)$', 'django.views.static.serve', {'document_root' : settings.MEDIA_ROOT}),

--- views.html ---

def submit(request):
    if request.method == 'POST':
        form = SubmitForm(request.POST, request.FILES)
        if form.is_valid():
            <omitted code related to handling file upload>
    else:
        form = SubmitForm()

    return render_to_response('submission_form.html', {'form' : form})

--- forms.py ---

class SubmitForm(forms.Form):
    email = forms.EmailField(required=True, label='Email address:')
    uploadedfile = forms.FileField(required=True, label='File to upload:')

--- submission_form.html ---

<body bgcolor="gray" >
    <h1>GRID PE-Classifier Submission Portal</h1>
    {% if form.errors %}
        <p style="color: red;">Please correct the error{{ form.errors|pluralize }} below. </p>
    {% endif %}

    <img src="{{ MEDIA_URL }}GRID_LOGO_rev4.jpg" />
    <form enctype="multipart/form-data" action="" method="post" >
        <div class="field">
                <table>
                    {{ form.email.label }}
                    {{ form.email }}
                </table>
                <em>{{ form.email.errors }}</em>
        </div>
        <div class="field">
                <table>
                    {{ form.uploadedfile.label }}
                    {{ form.uploadedfile }}
                </table>
                <em>{{ form.uploadedfile.errors }}</em>
        </div>
        <input type="submit" value="Submit">
    </form>
</body>

One last thing, I checked the response of the development server and saw that the JPG that I should be displaying as an image on my HTML template/form was passed as a GET parameter on the submit function of the views.py. See below:

Development server is running at http://0.0.0.0:8000/
Quit the server with CONTROL-C.
[24/Apr/2012 04:55:57] "GET /submit/ HTTP/1.1" 200 621
[24/Apr/2012 04:55:57] "GET /submit/GRID_LOGO_rev4.jpg HTTP/1.1" 404 2208

Hope you can help me on this (since this is the last leg of my project and I am quite stuck). Also,if you can point me to some comprehensive but direct to the point references regarding using CSS and JS on Django to beautify your webpage,that would be great too.

Thanks in advance!

Community
  • 1
  • 1
jaysonpryde
  • 2,733
  • 11
  • 44
  • 61

1 Answers1

0

You haven't used a RequestContext to render your template, so the MEDIA_URL is not being passed.

Daniel Roseman
  • 588,541
  • 66
  • 880
  • 895
  • Thanks Daniel... But it did not work :(. I replaced the line in submit function in views.py to something that utilize RequestContext. return render_to_response('submission_form.html', {'form' : form}, context_instance=RequestContext(request)) – jaysonpryde Apr 24 '12 at 11:03
  • Did you add "django.core.context_processors.media" to your TEMPLATE_CONTEXT_PROCESSORS in settings.py? – dannyroa Apr 24 '12 at 19:36