Django : uploaded image not acessed in the template

Question

I am trying to create a code like facebook image upload in django. My image gets uploaded and it is stored in the media folder under documents , and i like to show that image wherever i want in my template , but the image should be the latest one, to show in the template

models.py

class ImageUpload(models.Model):
    image = models.FileField(upload_to='documents/')

views.py

def ImageUpload(request):

    #lastimage = ImageUpload.objects.latest()
    #print(lastimage)
    if request.method == 'POST':
        form = ImageUploadForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return redirect('dashboard.html')
    else:
        form = ImageUploadForm()
    return render(request, 'image_upload.html', {
        'form': form
    })



def ImageShow(request):
    import pdb; pdb.set_trace()
    from . models import ImageUpload
    print("To show the image of the list")
    imgs = ImageUpload.objects.all()

    return render_to_response('index.html', {'images': imgs, 'media_root': MEDIA_ROOT, 'media_url': MEDIA_URL})

forms.py

from django import forms
from chat.models import ImageUpload

class ImageUploadForm(forms.ModelForm):
    class Meta:
        model = ImageUpload
        fields = '__all__'

image_upload.html

{% extends 'base.html' %}

{% block content %}
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}

    <button type="submit">Upload</button>
  </form>
  <p><a href="{% url 'dashboard' %}">Return to home</a></p>
{% endblock %}

base.html

     <div class="row">
                <div class="col-lg-1 col-md-0 col-sm-1 col-xs-12">
                  <div class="menu-switcher-pro">
                    <button type="button" id="sidebarCollapse" class="btn bar-button-pro header-drl-controller-btn btn-info navbar-btn"> <i class="educate-icon educate-nav"></i> </button>
                  </div>
                </div>
                <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 pull-right">
                  <div class="header-right-info">
                    <ul class="nav navbar-nav mai-top-nav header-right-menu">
                      <li class="nav-item"> <a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"> <img src="/static/Chatbot_Dashboard/img/admin.png" alt="Admin-image" /> <span class="admin-name">Admin</span> <i class="fa fa-angle-down edu-icon edu-down-arrow"></i> </a>
                        <ul role="menu" class="dropdown-header-top author-log dropdown-menu animated zoomIn">
                          <!--<li><a href="#"><span class="edu-icon edu-home-admin author-log-ic"></span>My Account</a> </li>-->
                          <!--<li><a href="#"><span class="edu-icon edu-user-rounded author-log-ic"></span>My Profile</a> </li>-->
                          <!--<li><a href="#"><span class="edu-icon edu-settings author-log-ic"></span>Settings</a> </li>-->
                          <li><a href="/logout/"><span class="edu-icon edu-locked author-log-ic"></span>Log Out</a> </li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  <div class="analytics-sparkle-area breadcome-list-padd">
    <div class="container-fluid">
      <div class="row">
             {% block content %}
             {% endblock %}
      </div>
    </div>
  </div>

index.html

{% extends 'base.html' %}

{% for img in images %}
    <img src="{{ media_root }}{{ img.image.name }}" />
    <img src="{{ media_url }}{{ img.image.name }}" />
    <img src="{{ img.image.url }}" />
    {% endfor %}

even i have tried to see all the images , but that also not worked