How can I pass an image to a template in Django?

Question

Suppose that the corresponding function in views.py looks like

from PIL import Image
def get_img(request, img_source)
    base_image = Image.open(os.getcwd() + '/deskprod/media/img/'+ img_source + ".png")
    #Some editing of base_image done with PIL that prevents image from being directly loaded in html
    return render_to_response('get_img.html', {
        'base_image': base_image},
        context_instance=RequestContext(request))

How can I then display base_image in the get_img.html template?

You don't need to pass the image to your context. You only need the path to the image to show the image in your template — Moses Koledoye, Jul 28 '16 at 20:17
Moses, thank you for your response. In the actual program, there would be some editing of the image that cannot be achieved in html - i.e things done with the python imaging library. As a result, just loading the image directly from the template is not an option. I have edited the question to indicate that. — Everyone_Else, Jul 28 '16 at 20:18
"As a result, just loading the image directly from the template is not an option" -- This is a non-sequitur. Just because you edit an image doesn't mean you can't save it somewhere and view it normally. What do you gain by passing raw image data to a template anyway? Talk about something HTML isn't made to do... — Two-Bit Alchemist, Jul 28 '16 at 20:31

score 6 · Accepted Answer · edited Jun 07 '23 at 11:59

You should process the image, save it on local disk and then send a path to it or more like the media url which will correspond to that image as context to html template. You need to configure your django server to serve static and media files to do that and configure serving those files in production environment as well. Read more here https://docs.djangoproject.com/en/1.9/howto/static-files/ django-4.2

However it should be possible to create dynamic image and serve with django in the fly with PIL if you can't or really do not want to save it locally. It will be sth like at the and of you code you should add.

response = HttpResponse(mimetype="image/png")
base_image.save(response, "PNG")
return response

Check also more info http://effbot.org/zone/django-pil.htm, it may work, although I didn't test it.

I am pleasantly surprised that there actually was an easy solution to this problem. Thank you very much, Kamil. — Everyone_Else, Jul 28 '16 at 20:38

shivam sharma · Answer 2 · 2020-04-29T01:43:33.017

settings.py

   'DIRS': [os.path.join(BASE_DIR, 'templates')], # add this line in TEMPLATES
    MEDIA_ROOT = os.path.join(BASE_DIR, 'media/images')
    MEDIA_URL = '/media/images/'

add templates and media/images directory where manage.py is stored.

urls.py

urlpatterns = [

                  url('polls/', views.get_img, name="polls"),


              ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

views.py

from django.conf import settings

def get_img(request):
    path = settings.MEDIA_ROOT
    img_list = os.listdir(path + "/")
    print(img_list[0])
    base_image = "http://127.0.0.1:8000/media/images/" + img_list[0]
    content = {"base_image": base_image}
    return render(request, 'get_img.html', content)

get_img.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drop_down</title>
</head>
<body>

  {{base_image}}
  <img src="{{base_image}}" style="width: 20%; height: 20%;" alt="{{base_image}}">

</body>
</html>

you can pass your base_image to get_image.html page using dictionary content = {"base_image": base_image} and use {{base_image}} key at src attribute in get_img.html template to display. — shivam sharma, Apr 29 '20 at 01:28

score 0 · Answer 3 · answered Jan 18 '23 at 09:38

You can pass image as base64 bytes to Django template, and then use it in html:

view.py

from PIL import Image
from io import BytesIO
import base64
    
    
# Convert Image to Base64
def image_to_base64(image):
    buff = BytesIO()
    image.save(buff, format="PNG")
    img_str = base64.b64encode(buff.getvalue())
    img_str = img_str.decode("utf-8")  # convert to str and cut b'' chars
    return img_str

def home(request):
    image = Image.open('some_image.png')
    image64 = image_to_base64(image)
    return render(request, 'index.html', {'image64': image64})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <img src="data:image/png;base64,{{image64}}">
</body>
</html>

It will works for JPG too - need to change all PNG mentions to JPG in .py/.html

score -1 · Answer 4 · answered Jul 28 '16 at 20:26

-1

I think you must save image (write it to temp file) in static directory of project and in template use static command and image file name to display it.

answered Jul 28 '16 at 20:26

Mohammad Esmaeilbeygi

84
3

How can I pass an image to a template in Django?

4 Answers4

view.py

index.html

Linked