Django image only showing in some pages - django

Question

I have some problems in django,
I can load images in my index.html, but not in other templates,
why is this happening?
Tried many methods and viewed many other post but non work for me.
This is my urls.py
urlpatterns = patterns('',
# Examples:
url(r'^$', 'userboard.views.home', name='home'),
url(r'^items/(?P<UserBoard_id>\d+)/$','userboard.views.details',name='details'),
url(r'^upload.html$', 'userboard.views.upload', name='upload'),
url(r'^items/(?P<UserBoard_id>\d+)/delete.html$','userboard.views.delete',name='delete'),
url(r'^items/(?P<UserBoard_id>\d+)/edit.html$','userboard.views.edit',name='edit'),
url(r'^media/(?P<path>.*)$', 'django.views.static.serve',
{'document_root': settings.MEDIA_ROOT}),
This is my index.html, it works fine
<h1> Your Items: </h1>
<ul>
{% for items in ItemList %}
<li><a href="/items/{{items.id}}/">
<img src="{{items.itemImage}}"></a>
</li>
<hr />
{% endfor %}
</ul>
Add a new item
but this wont load my pictures
<img src="{{item.itemImage}}">
<h1>{{item.itemName}}<h1>
<h2>{{item.itemDesc}}</h2>
<br /><br/><br/>
Delete this item
<br />
Edit this item
i am not sure if you need my views, here they are
def home ( request) :
ItemList= models.UserBoard.objects.all()
return render_to_response('index.html',{'ItemList':ItemList})
def details(request,UserBoard_id):
try:
item=models.UserBoard.objects.get(pk=UserBoard_id)
except models.UserBoard.DoesNotExist:
raise Http404
return render_to_response('details.html' ,{'item':item})
Please let me know where I went wrong or at least give me a hint where I could start searching on.
EDIT:
here are my models
from django.db import models
class UserBoard(models.Model):
itemName=models.CharField(max_length=100)
itemDesc=models.CharField(max_length=400)
itemImage=models.ImageField(upload_to='../media/pictures')
if i print out the value of items.itemImage, it will show this ../media/pictures/d.jpg
Same value in both pages, but image will only show on 1. Templates for both pages are at the same folder.
And here is my settings.py media root
MEDIA_ROOT = '/home/rox/Documents/IP/userboard/media/'
MEDIA_URL = 'media/'
PROBLEM SOLVED
THANKS A LOT to little_birdie and the others out there who helped.
The problem was this . I didn't put the '/' infront of item.itemImage previously.
However, why is it that without the / it works in the index.html but not the others?

Answer 1

Not quite enough information but I think I know what's going on here.
You are getting a relative path from item.itemImage, that is.. it does not start with a slash, so the browser will load it relative to the url of the page the image is on.
Apparently you stored the full url path to your image in your image field, eg:
media/foo/myphoto.jpg
When loaded from / (home page) becomes '/media/foo/myphoto.jpg'.. which works.
The bottom line is, do this:
<img src="/{{item.itemImage}}">