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.
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">
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.
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">