How to serve an image in Django using jquery

Question

I am trying to update a div element in my html page with a png image which gets returned from the Django server.

In my client-side script where I send an ajax POST request on a button click, I have -

    $('#mybtn').click(function (event) {
        event.preventDefault();
        $.ajax({
            url: "/analysis",
            type: "POST",
            data: { 'data': $("#analysis_list").val(), csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value },
            success: function (response) {
                $('#imagediv').html('<img src=' + response + ' />');
            },
        });
    });

In my views.py, I have -

def analysis(request):
    dataFromClient = dict(request.POST)['data'][0]
    pathToImg = testAnalytics(dataFromClient)
    img = Image.open(pathToImg)
    response = HttpResponse(content_type="image/png")
    img.save(response, "PNG")
    return response

Where testAnalytics method generates the image to be displayed according to the data sent by client and returns the path to it. Image is imported from PIL.

I am facing problem with rendering the image at client-side javascript. When I assign response to src attribute of the <img> tag, I see raw image data on the browser instead of the image (as discussed in here - How to update a div with an image in Django?). I am not sure where I am going wrong.

I have also tried base64 encoding on the response as follows (but not sure whether I have implemented correctly) -

success: function (response) {
                $('#imagediv').html('<img alt="Embedded Image" src="data:image/png;base64,' + response + '" />');
            }

I have referred to following links to get upto this point -
Django: How to render image with a template
Serve a dynamically generated image with Django

I am fairly new to web-programming as well as Django. Any insights regarding the problem will be really helpful. Thanks in advance.

when you returned it as base64, did you modify the img tag like this? http://stackoverflow.com/q/1207190/870769 — sthzg, Apr 26 '15 at 00:33
Yes. Although I did not refer to the same post you have mentioned, what I tried was similar to which they have discussed in there. I will edit my question with my code where I tried Base64 encoding. — Amogh Kulkarni, Apr 26 '15 at 00:39
Tried it just now, didn't work. Earlier my `complete` method was also getting executed (I have an alert box there, suggesting my code reaches there); but with this my code doesn't reach there. — Amogh Kulkarni, Apr 26 '15 at 01:01
One step closer. The `complete` method gets executed, the raw image data is not there, but the image displayed is broken. Checked the actual .png file on the machine, opened fine. — Amogh Kulkarni, Apr 26 '15 at 01:07
`var reader = new FileReader(); reader.onload = function(e) { $("#imagediv").html(""); }; reader.readAsDataURL(response);` ? — guest271314, Apr 26 '15 at 01:11
Sadly, this didn't work either. Similar problem - `complete` method doesn't get executed. — Amogh Kulkarni, Apr 26 '15 at 01:23

score 3 · Accepted Answer · answered Apr 26 '15 at 05:03

Try encoding the image using base64 before you send it.

import base64
#rest of your code 
with open("pathToImage.png", "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read())

Then

success: function(response){
            $('#imagediv').html('<img src="data:image/png;base64,' + response + '" />');

M.javid · Answer 2 · 2015-04-26T05:21:58.303

If you want set image by content of any HTML tags you must apply data:{type};{encode-format} before image content and set background url in CSS, similar below:

html-element{
   background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEklEQVQImWNgIAD+QzFuAeIAAPVzA/0vfQ+9AAAAAElFTkSuQmCC) repeat;
}

Or set this by src attribute of img tag:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEklEQVQImWNgIAD+QzFuAeIAAPVzA/0vfQ+9AAAAAElFTkSuQmCC">

for example if you generate a new pattern in www.patternify.com site, you can copy and use base64 content from Base64 Code field.

How to serve an image in Django using jquery

2 Answers2