Image Not Displaying in Some Pages in Django Template

Question

This is file structure:

myApp/ mediafiles/ photos mySite/ templates/ mySite/ index.html images.html profile.html

My images get saved to mediafiles/photos with these settings:

TEMPLATE_DIRS, MEDIA_ROOT = [os.path.join(BASE_DIR, 'templates'), os.path.join(BASE_DIR, 'mediafiles')]
MEDIA_URL = '/mediafiles/'

I have four urls:

url(r'^$', views.index, name='index'),
url(r'^newimage/$', views.newImage, name='profile_photo'),
url(r'^user/(?P<user_name>\w+)/$', views.profile, name='profile'),
url(r'^books/(?P<book_id>\d+)/(?P<book_name>[-\w]+)/$', views.book_profile, name='book_profile'),

Using sorl-thumbnail:

url(r'^$', views.index, name='index'),
#the image tag below display my image correctly
<img src=".{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">

url(r'^newimage/$', views.newImage, name='profile_photo'),
#the image tag below display my image correctly
<img src="..{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">

url(r'^user/(?P<user_name>\w+)/$', views.profile, name='profile'),
#all the image tags below display my image correctly
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
<img src=".{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
<img src="...{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">

What am I doing wrong and how do I do it correctly?