Django: embedding image in template - django

Question

I need an image to be displayed within my webpage. The image is stored within a variable in views.py.
Most solutions such as the one below use HttpResponse to output images but I want the image to be embedded within my html template.
from django.http import HttpResponse
def my_image(request):
image_data = open("/path/to/my/image.png", "rb").read()
PS. I am getting the image by using matplotlib to create the image. So I cannot use a static folder. Example code given below (credit:this)
import sys
from django.http import HttpResponse
import matplotlib as mpl
mpl.use('Agg') # Required to redirect locally
import matplotlib.pyplot as plt
import numpy as np
from numpy.random import rand
try:
# Python 2
import cStringIO
except ImportError:
# Python 3
import io
def get_image(request):
"""
This is an example script from the Matplotlib website, just to show
a working sample >>>
"""
N = 50
x = np.random.rand(N)
y = np.random.rand(N)
colors = np.random.rand(N)
area = np.pi * (15 * np.random.rand(N))**2 # 0 to 15 point radiuses
plt.scatter(x, y, s=area, c=colors, alpha=0.5)
"""
Now the redirect into the cStringIO or BytesIO object >>>
"""
if cStringIO in sys.modules:
f = cStringIO.StringIO() # Python 2
else:
f = io.BytesIO() # Python 3
plt.savefig(f, format="png", facecolor=(0.95,0.95,0.95))
plt.clf()
"""
Add the contents of the StringIO or BytesIO object to the response, matching the
mime type with the plot format (in this case, PNG) and return >>>
"""
return HttpResponse(f.getvalue(), content_type="image/png")
return HttpResponse(image_data, content_type="image/png")

Answer 1

Save the image in the media directory and then use ajax to update the div
something like
def get_image(request):
"""
This is an example script from the Matplotlib website, just to show
a working sample >>>
"""
N = 50
x = np.random.rand(N)
y = np.random.rand(N)
colors = np.random.rand(N)
area = np.pi * (15 * np.random.rand(N))**2 # 0 to 15 point radiuses
plt.scatter(x, y, s=area, c=colors, alpha=0.5)
filepath = os.path.join(settings.MEDIA_PATH,'/name_of_the_file.png')
plt.savefig(filepath, facecolor=(0.95,0.95,0.95))
plt.clf()
return HttpResponse(filepath)
then go to the function with ajax request
$.ajax({ type: "POST",
url: 'THE URL TO THE FUNCTION',
data: {
csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(),
},
success: function(response){
$('#your_div_id').html("<img src=\""+responce+"\"></img>")
}
});