How do I include image files in Django templates

Question

I m new to Django and I m trying to learn it through a simple project I m developing called  dubliners  and an app called  book   The directory structure is like this   dubliners book    includes models py  views py  etc   dubliners templates book    I have a JPG file that needs to be displayed in the header of each Web page  Where should I store the file  Which path should I use for the  tag to display it using a template  I ve tried various locations and paths  but nothing is working so far        Thanks for the answer posted below  However  I ve tried both relative and absolute paths to the image  and I still get a broken image icon displayed in the Web page  For example  if I have an image in my home directory and use this tag in my template     lt img src   home tony london jpg    gt     The image doesn t display  If I save the Web page as a static HTML file  however  the images display  so the path is correct  Maybe the default Web server that comes with Django will display images only if they re on a particular path

User · Answer

If your file is a model field within a model, you can also use ".url" in your template tag to get the image.

For example.

If this is your model:

class Foo(models.Model):
    foo = models.TextField()
    bar = models.FileField(upload_to="foo-pictures", blank = True)

Pass the model in context in your views.

return render (request, "whatever.html", {'foo':Foo.objects.get(pk = 1)})

In your template you could have:

<img src = "{{foo.bar.url}}">

User · Answer

Try this   settings py    typically  os path join os path dirname   file      media   MEDIA ROOT     lt your path gt  media  MEDIA URL     media     urls py  urlpatterns   patterns                     r  media   P lt path gt         django views static serve                      document root   settings MEDIA ROOT                       html   lt img src     MEDIA URL    lt sub-dir-under-media-if-any gt   lt image-name ext gt     gt    Caveat  Beware  using Context   will yield you an empty value for   MEDIA URL    You must use RequestContext    instead    I hope  this will help

User · Answer

Your    lt img src   home tony london jpg    gt    will work for a HTML file read from disk  as it will assume the URL is file    home      For a file served from a webserver though  the URL will become something like  http   www yourdomain com home tony london jpg  which can be an invalid URL and not what you really mean   For about how to serve and where to place your static files  check out this document  Basicly  if you re using django s development server  you want to show him the place where your media files live  then make your urls py serve those files  for example  by using some  static  url prefix    Will require you to put something like this in your urls py    r  site media   P lt path gt         django views static serve         document root     path to media       In production environment you want to skip this and make your http server  apache  lighttpd  etc  serve static files

User · Answer

If you give the address of online image in your django project it will work  that is working for me  You should take a shot

User · Answer

I have spent two solid days working on this so I just thought I d share my solution as well  As of 26 11 10 the current branch is 1 2 X so that means you ll have to have the following in you settings py   MEDIA ROOT     lt path to files gt    i e   home project django app templates static  MEDIA URL    http   localhost 8000 static       remember that MEDIA ROOT is where the files are and MEDIA URL is a constant that you use in your templates     Then in you url py place the following   import settings    stuff   r  static   P lt path gt         django views static serve    document root   settings MEDIA ROOT      Then in your html you can use    lt img src     MEDIA URL   foo jpg  gt    The way django works  as far as I can figure is    In the html file it replaces MEDIA URL with the MEDIA URL path found in setting py It looks in url py to find any matches for the MEDIA URL and then if it finds a match  like r  static   P      relates to http   localhost 8000 static   it searches for the file in the MEDIA ROOT and then loads it

User · Answer

In development In your app folder create folder name  static  and save your picture in that folder  To use picture use    lt html gt       lt head gt            load staticfiles     lt  -- Prepare django to load static files -- gt       lt  head gt       lt body gt           lt img src    static  image jpg     gt       lt  body gt   lt  html gt    In production  Everything same like in development  just add couple more parameters for Django    add in settings py STATIC ROOT   os path join BASE DIR   static    this will prepare folder where static files from all apps will be stored  be sure your app is in INSTALLED APPS     myapp    in terminall run command python manage py collectstatic  this will make copy of static files from all apps included in INSTALLED APPS to global static folder - STATIC ROOT folder   Thats all what Django need  after this you need to make some web server side setup to make premissions for use static folder  E g  in apache2 in configuration file httpd conf  for windows  or sites-enabled 000-default conf   under site virtual host part for linux  add   Alias  static  path to your project static        Require all granted  And that s all

User · Answer

Another way to do it   MEDIA ROOT     home USER Projects REPO src PROJECT APP static media   MEDIA URL     static media     This would require you to move your media folder to a sub directory of a static folder   Then in your template you can use    lt img class  scale-with-grid  src    object photo url     gt

User · Answer

In production  you ll just have the HTML generated from your template pointing to wherever the host has media files stored  So your template will just have for example   lt img src     media foo png  gt    And then you ll just make sure that directory is there with the relevant file s    during development is a different issue  The django docs explain it succinctly and clearly enough that it s more effective to link there and type it up here  but basically you ll define a view for site media with a hardcoded path to location on disk   Right here

User · Answer

I tried various method it didn t work But this worked Hope it will work for you as well  The file directory must be at this locations   projec your app templates project your app static  settings py  import os     PROJECT DIR   os path realpath os path dirname      file        STATIC ROOT     your path static     example   STATIC ROOT     home project name your app static       STATIC URL     static       STATICFILES DIRS         PROJECT DIR   static           don t forget comma       TEMPLATE DIRS          PROJECT DIR   templates            proj app templates filename html  inside body     load staticfiles       for image  img src     static  fb png      alt  image here     note that fb png is at  home project app static fb png   If fb png was inside  home project app static image fb png then   img src     static  images fb png      alt  image here

User · Answer

media directory under project root  Settings py  BASE DIR   os path dirname os path dirname   file     MEDIA URL     media   MEDIA ROOT   os path join BASE DIR   media     urls py      urlpatterns    patterns  django views static   r  media   P lt path gt       serve    document root  settings MEDIA ROOT        template   lt img src    MEDIA URL   image png   gt

User · Answer

I do understand  that your question was about files stored in MEDIA ROOT  but sometimes it can be possible to store content in static  when you are not planning to create content of that type anymore  May be this is a rare case  but anyway - if you have a huge amount of  quot pictures of the day quot  for your site - and all these files are on your hard drive  In that case I see no contra to store such a content in STATIC  And all becomes really simple   static To link to static files that are saved in STATIC ROOT Django ships with a static template tag  You can use this regardless if you re using RequestContext or not     load static     lt img src  quot    static  quot images hi jpg quot     quot  alt  quot Hi  quot    gt   copied from Official django 1 4 documentation   Built-in template tags and filters

[python] How do I include image files in Django templates?

Examples related to python

Examples related to django

Examples related to django-templates