Sposób wyświetlania obrazu w Django przy użyciu jquery

Question

Próbuję zaktualizować element div na stronie html obrazem png, który zostanie zwrócony z serwera Django.

W moim skrypt po stronie klienta, gdzie wysłać żądanie POST ajax na kliknięcie przycisku, mam -

$('#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 + ' />'); 
      }, 
     }); 
    }); 

W moim views.py mam -

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 

Gdzie testAnalytics metoda generuje obraz wyświetlany zgodnie z danymi wysłanymi przez klienta i zwraca ścieżkę do niego. Image jest importowany z PIL.

Mam problem z renderowaniem obrazu w javascript po stronie klienta. Kiedy przypisuję atrybut response do src znacznika <img>, widzę nieprzetworzone dane obrazu w przeglądarce zamiast w obrazie (jak to omówiono tutaj - How to update a div with an image in Django?). Nie jestem pewien, gdzie idę źle.

Próbowałem również kodowanie base64 od odpowiedzi w następujący sposób (ale nie jestem pewien, czy mam realizowane poprawnie) -

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

Mam mowa poniższe linki, aby uzyskać zapisu do tego punktu -
Django: How to render image with a template
Serve a dynamically generated image with Django

Jestem całkiem nowy w programowaniu stron internetowych, a także w Django. Wszelkie spostrzeżenia dotyczące problemu będą naprawdę pomocne. Z góry dziękuję.

Answer 1

Spróbuj zakodować obraz przy użyciu base64 przed wysłaniem.

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

Następnie

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

Answer 2

Jeśli chcesz set zdjęcie za treść jakichkolwiek znaczników HTML należy zastosować data:{type};{encode-format} przed zawartości obrazu i ustawić background url w CSS, podobnie poniżej:

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

Albo ustawić to przez src atrybut img tagu:

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

na przykład jeśli wygenerować nowy wzorzec w www.patternify.com miejscu, można skopiować i wykorzystać zawartość base64 z Kodeksu base64 pole.