[Django]-How to display a saved,dynamically created image in django template?

by

7👍

✅

There are many things wrong about your approach but I’ll try to give you some advice on how to proceed, although you may want to reconsider it.

First of all, saving your file to the templates directory won’t make it available to your template. The templates directory is a special configuration that allows you to use Django’s template loader, it doesn’t load static files like your image.

You could save your image to static files and use the {% static %} template tag to recover it, but, again, it would be the wrong approach, as your image is not static content, it’s created dynamically.

As you have no use for the data in the image after it’s created, my recommendation would be to store the image in a temporary file using TempFile, or (if it’s light enough) in memory using StringIO and then load those bytes in the context as base64

from StringIO import StringIO
import base64

img_in_memory = StringIO()
fig.savefig(img_in_memory, format="png") #dunno if your library can do that.
context['image'] = base64.b64encode(img_in_memory.getvalue())

Then, in your template you’d do something like:

<img src="data:image/png;base64,{{image}}" />
👤fixmycode

1👍

Or simply convert the image to string by

with open(original_image_path, "rb") as img_file:
    base64_img = base64.b64encode(img_file.read()).decode('utf-8')
    mimetype = mimetypes.guess_type(original_image_path)[0]

once done render this variable on HTML as

<img src="data:{{ mimetype }};base64,{{ base64_img }}"/>

It will handle both jpeg and png both.

👤Hitesh Kataria

0👍

I experienced such issues while generating a dynamic graph, I simply used this format.

If the image is saved with a specific filename statically and it’s not being regenerated dynamically each time, then rendering it using the static tag wouldn’t work as expected. In this case, you should directly use the URL path to the image without the static tag.

Here’s how you can update the tag in your HTML template:

I was using this format before:

<img src="{% static 'images/female_graph_'|add:request.user.id|stringformat:".png" %}" alt="Female Spouse Graph">

The correct way of rendering dynamic images stored in a static file:

<img src="/static/images/female_graph_{{ request.user.id }}.png" alt=" Female Spouse Graph">

Ensure you used the HTML tag correctly <> before the img src. open and close the image tag.

Replace /static/ with the appropriate URL path to your static files if needed. This way, the browser will directly request the image from the correct URL without involving the static tag, and it should render properly.

👤Arch

Leave a comment