sorl-thumbnail not displaying image in Django Template

Question

models.py:

class NewImage(models.Model):
    thumbnail = models.ImageField(upload_to='photos')
    time_created = models.DateTimeField()

forms.py:

class ImageForm(forms.ModelForm):
    class Meta:
        model = NewImage
        fields = {'thumbnail'}

I have rendered this form in my template and the pictures gets uploaded successfully. I also get them displayed without sorl-thumbnail.

views.py:

def loadImages(request):
    images = NewImage.objects.all()
    context = {'images': images}
    return render(request, 'mysite/imagedisplay.html', context)

imagedisplay.html:

{% load thumbnail %}

{% for image in images %}
    <p>{{image.time_created}}</p>
    <img src='..{{image.thumbnail.url}}' width = '50%'/>
{% endfor %}
 <!-- this displays the images but the code below doesn't work -->
{% for image in images %}
    {% thumbnail image.thumbnail "100x100" crop="center" as im %}
        <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
    {% endthumbnail %}
{% endfor %}

It only display square box without the image:

When I inspect the box to see the source it shows <img src="/mediafiles/cache/e0/b4/e0b4ff0750a34c5c417b30058554c160.jpg" width="100" height="100">

instead of <img src="../mediafiles/photos/170_kclgRCl.jpg" width="100" height="100">

How do I get this work?