CODEWITHSUNDEEP
pythondjangoimagetemplates
hln
hln

Reputation: 1106

show images in Django templates

Can someone help me with this issue: I have a Django porject,

in settings.py

 MEDIA_ROOT = 'C:/Users/hl/workspace/beer/media'
 MEDIA_URL = '/media/'
 STATICFILES_DIRS = (
    'C:/Users/hl/workspace/beer/media'
 )

and in models.py 

image1= models.ImageField(upload_to=settings.MEDIA_ROOT)

and in url.py

 (r'^media/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT}),

in views

def allBeer(request): 
      beers=Beer.objects.all().order_by("name")
      context={'beers': beers}
      return render_to_response('AllBeers.html',context,context_instance=RequestContext(request))

and in html

 {%for beer in beers %}
    <p>
        <a href="/beers/{{beer.slug}}/">
            <img scr="{{beer.image1.url}}">{{beer}}
        </a>
    </p>
 {% endfor%}

It has not problem to load images, but images wont show in html file. I have searched and read a lot from internet but I still couldn't figure out.

Can anyone tell me why?

Upvotes: 19

Views: 55094

Answers (5)

Rabah Ali Shah
Rabah Ali Shah

Reputation: 71

I finally fixed this issue by creating a folder directory to upload my images like:

public/static/receipe

So my settings.py would look like:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'public/static')
]
MEDIA_ROOT = os.path.join(BASE_DIR, 'public/media')
MEDIA_URL = '/media/'

My Models.py:

from django.db import models

# Create your models here.


class Receipe(models.Model):
    receipe_name = models.CharField(max_length=100)
    receipe_description = models.TextField()
    receipe_Image = models.ImageField(upload_to="receipe/")

In my receipes.html: Here do not forget to add {% load static %}

 {% load static %}
        <img src="/static/{{receipe.receipe_Image}}" height="100" width="100" />

Now change this code according to your path and you are done :)

Upvotes: 1

Azharul Islam Somon
Azharul Islam Somon

Reputation: 117

Follow this steps to load an image on your Django Template:

  1. Add this to your settings file:
    
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

  1. Create a folder named “media” under your project root directory, meaning the folder will be on the same level as your apps

  2. Add these to your main urls.py

from . import views, settings
from django.contrib.staticfiles.urls import static

urlpatterns = [
    # ... the rest of your path goes here ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  1. In your model, use ImageField for the field being used for the image.
    
photo = models.ImageField(upload_to="gallery")
  1. Add below to your template to load your images

If you are loading dynamically from a context object, use a syntax similar to this:

    
img src="{{ obj1.photo.url }}"

If you are loading statically, when the file name is already determined, use:

img src="/media/project_name/photo.png"

Upvotes: 7

Ansif_Muhammed
Ansif_Muhammed

Reputation: 436

the location of your images are important. it has to be in the static folder and that has to be defined in the settings.

Upvotes: 0

Aidan Ewen
Aidan Ewen

Reputation: 13328

You're messing with the src attribute of the image. It should just be -

<img src="{{beer.image1.url}}" /> <!-- from the media url -->

Don't add anything to the end - django know's the url to serve the image from - that's what the ImageField on the model does.

I don't know that there's actually anything wrong with your url conf, but the pattern recommended in the docs is -

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = patterns('',
    # ... the rest of your URLconf goes here ...
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Upvotes: 9

catherine
catherine

Reputation: 22808

image1= models.ImageField(upload_to=images)


from django.conf.urls import patterns, include, url
from django.conf.urls.static import static
from django.contrib import admin
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from project_name import settings

admin.autodiscover()
urlpatterns = patterns('',
    ...........
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

urlpatterns += staticfiles_urlpatterns()


<img src="{{MEDIA_URL}}{{beer.image1}}">

settings.py

import os

PROJECT_ROOT = os.path.join(os.path.dirname(__file__), '..')
SITE_ROOT = PROJECT_ROOT


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


STATIC_ROOT = os.path.join(SITE_ROOT, 'static')
STATIC_URL = '/static/'


STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    os.path.join(SITE_ROOT, 'staticfiles'),
)

TEMPLATE_DIRS = (
    # Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    os.path.join(SITE_ROOT, 'templates'),
)

Upvotes: 11

Related Questions