Image created in views isnt being rendered in template django

Question

Im trying to render a simple graph that i create with matplotlib in my template. I want to render the graph in the body of the page not just return an HttpResponse with that graph. But i cant get it to work. Here is what i tried.

views.py code

def showGraph(request):

content_x = [10, 20, 30]
content_y = ['one', 'two', 'three']
plt.bar(content_x, content_y)
plt.title('Some chart')
plt.show()
buffer = io.BytesIO()
canvas = plt.get_current_fig_manager().canvas
canvas.draw()
graphIMG = PIL.Image.frombytes('RGB', canvas.get_width_height(), canvas.tostring_rgb())
graphIMG.save(buffer, "PNG")
content_type = "Image/png"
buffercontent = buffer.getvalue()
graphic = (buffercontent, content_type)
plt.close()
return render(request, 'projectRelated/LAN/graphs.html', {'graphic': graphic})

html page code

{% extends 'base.html' %}
{% load static %}
{% block container_content %}
  <img src="data:image/png;base64,{{ graphic }}">
{% endblock container_content %}

The above code just displays a random icon..

That just means that you are not setting the `src` attribute correctly. `Src` must be a url or a path to an img file. when your html renders what is the value of src? — AzyCrw4282, Apr 03 '20 at 16:32
I checked the value via element selector(F12) and its a whole bunch of random code like this |\xf8`\xce\x9c\xb9s\xe6\xdc3\xf3\x9e{\xef ..... — IanMoone, Apr 03 '20 at 16:38
Decode your hex [here](http://ddecode.com/hexdecoder/) and check if thats what it should be — AzyCrw4282, Apr 03 '20 at 16:40
Does this answer your question? [Serve a dynamically generated image with Django](https://stackoverflow.com/questions/1074200/serve-a-dynamically-generated-image-with-django) — Ken Kinder, Apr 03 '20 at 17:24
Thanks for trying to Help Ken but no, that returns and HttpResponse with the graph. I wanted to display the graph.png in my page body! — IanMoone, Apr 04 '20 at 17:22

AzyCrw4282 · Answer 1 · 2020-04-03T17:19:19.647

Since I can't decipher your hex values to see what's going on, the best way to get around this would be to save the image in a media dir and simply pass the path to the template to render it in the template.

x.html

{% block main %}
    <img src="{{ media_url }}{{ image.file }}">
{% endblock %}

In settings.py

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(PROJECT_PATH, 'media')

See here for an example

You can read more on the docs from here

score 0 · Answer 2 · answered Apr 04 '20 at 17:19

Alright i figured this out! As i said i dint want to return an HttpResponse of the graph i wanted to save the picture somehow and render it in my html page. I did it like this..

views.py code

def show_graph(request):

values_x = [10, 20, 30]
values_y = ['first', 'second', 'third']
plt.title('My chart')
plt.plot(values_x, values_y)
plt.legend()
plt.show()
canvas = plt.get_current_fig_manager().canvas
canvas.draw()
pil_image = PIL.Image.frombytes('RGB', canvas.get_width_height(), canvas.tostring_rgb())
plt.close()
pil_image.save('static/images/result_graph.png')
return render(request, 'projectRelated/LAN/graphs.html', context={})

myhtml.html

<img src="{% static 'images/result_graph.png' %}">

I dont know if its a good solution that i save the image in my static folder. But it was the only thing i could find to render the image in my page body. Let me know if it's a good solution, and thanks for your time!

Image created in views isnt being rendered in template django

2 Answers2