images not loading on webpage from database using django

Question:

i have made a library web app. i am trying to make a search for searching the books from database.all other information such as title is showing except the image.below is the screenshot
enter image description here

below is my search.html


    {% extends 'bookslib/base.html' %}
    {% block body_block %}
    {% load static %}
    {% if books %}
    {% for book in books %}
           <div class="books">
        <div class="book">
            <img src="{{ book.imagefile.url }}" height="250px" width="200px">
        <p>{{ book.title }}</p>
        </div>
    </div>    

{% endfor %}
{% endif %}
{% endblock %}

below is search view:

enter code here
 def search(request):

    if request.method == "POST":
        query = request.POST.get('query')
        if query:
            books = Book.objects.filter(Q(title__icontains=query) | Q(author__name__icontains=query))
            if books:
                return render(request, 'bookslib/search.html', {'books':books})
        else:
            return redirect('bookslib/home.html')
    return redirect('bookslib/home.html')   

i have added this path to my main project’s urls.py

enter code here
+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

my images are in
media/images/
media directory is in directory where my project and app is stored.
kindly help me.
if you need another information please let me know.
thank you in advance.

Asked By: Prabh Singh

||

Answers:

Try putting your files in the static folder, and setting this on setting.py.

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
TEMPLATE_DIR = os.path.join(BASE_DIR,'templates')
STATIC_DIR = os.path.join(BASE_DIR,'static')
MEDIA_DIR = os.path.join(BASE_DIR,'media')

if DEBUG == False:
    STATIC_URL = '/static/'
    #STATICFILES_DIRS = [STATIC_DIR,"/var/www/static"]
    STATIC_ROOT = os.path.join(BASE_DIR,"static")
    MEDIA_ROOT = MEDIA_DIR
    MEDIA_URL = '/media/'

else:
    MEDIA_URL = '/media/'
    STATIC_URL = '/static/'

Then run:
python manage.py collectstatic

Your static files will all be moved to the /static folder as defined in settings.py.
To reference your image you will use the path to the image in the static folder:

<img src="/static/name_of_your_image" height="250px" width="200px">

Answered By: João Victor