'Image Not displaying in django getting 404 error

I followed official django documentation for image field.I am able to store the image in the database but when I try to display it in browser I am getting 404 error.

My settings file,

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,"templates")],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'django.template.context_processors.media',
                'django.core.context_processors.static',
            ],
        },
    },
]

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static")]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR),"static")
MEDIA_ROOT =  os.path.join(os.path.dirname(BASE_DIR),"media")
MEDIA_URL = '/media/'

My models.py file,

class Add_prod(models.Model):
    book = models.CharField("Book Name",max_length=40)
    image = models.ImageField(upload_to='static/images',null=True)

My views.py file,

def add_prod(request):
    form = ProdForm(request.POST or None,request.FILES or None)
    my_products = Add_prod.objects.all()
    context = {
            "form":form,
            "products":my_products
    }
    if form.is_valid():
        instance = form.save(commit=False)
        book = form.cleaned_data.get("book")
        image = form.cleaned_data.get("image")
        instance.book = book
        instance.image = image
        instance.save()
   return render(request,"add-prod.html",context)

Small part of my urls.py file,

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

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL,document_root=settings.STATIC_URL)
    urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_URL)

Small part of my template file,

{% for i in products %}  
            <tr>
                <td>{{i.book}}</td>
                <td><img src="{{ MEDIA_URL }}{{i.image.url}}" alt="No Image"></td>
            </tr>
{% endfor %}

This is the error in the eclipse console,

Not Found: /media//media/static/images/644.jpg
"GET /media//media/static/images/644.jpg HTTP/1.1" 404 1800


Solution 1:[1]

In urls.py, I am noticing it has to be:

static(settings.STATIC_URL,document_root=settings.STATIC_ROOT) 

static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

Solution 2:[2]

Add this code below to "urls.py" which is the same directory as "settings.py" then, your error will be solved:

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

...
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nabeel Ahmed
Solution 2 Kai - Kazuya Ito