0

I want to make a app in which admin upload a image on admin panel and it display on the template. I'm know there are some question related to this but I tried all of them but still can't display image. Django version: 2.1.4 python version: 3.6.7

In setting.py

STATIC_URL = '/static/'

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'image')

In model.py

from django.db import models

class ImageModel(models.Model):
    caption = models.CharField(max_length=40)
    image = models.ImageField(upload_to='uploadImage', blank=True)

    def __str__(self):
        return self.caption

In view.py

from django.shortcuts import render
from .models import ImageModel

def image_page(request):
    images = ImageModel.objects.all()
    return render(request, 'input/hello.html', {'image':images})

In urls.py

from django.contrib import admin
from django.urls import path, include
from image import views
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.image_page),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

In imageShow.html

<img src="{{ ImageModel.image.url }}" alt="image" />

doing this show me a broken image and some time the full url of the image(where is the image is saved) What I'm doing wrong. I try to print variable images in views.py and it print my caption("image") so it means that it sending caption in img tag not the image itself? should I make a new class of ImageUpload? thanks in advance

Arsh Ergon
  • 160
  • 2
  • 15

1 Answers1

2

You need to iterate through ImageModel queryset (which you are sending as context via variable image) and show the image in template, like this:

{% for im in image %}
    <img src="{{ im.image.url }}" alt="image" />
{% endfor %}
ruddra
  • 50,746
  • 7
  • 78
  • 101
  • I have tried it before it once send me back the path of the image. – Arsh Ergon Jan 09 '19 at 09:16
  • Sir I have try for image in image.objects.all(): and print the image It returns ]> – Arsh Ergon Jan 09 '19 at 09:28
  • That is because its a queryset. BTW, how are you serving your image? Are you using this: https://docs.djangoproject.com/en/2.1/howto/static-files/#serving-files-uploaded-by-a-user-during-development ? – ruddra Jan 09 '19 at 10:09
  • `I try to print variable images in views.py and it print my caption("image") so it means that it sending caption in img tag not the image itself?`. Not sure what you are asking, but via `{ 'image': images }` you are sending queryset to template. It a collection of `ImageModel` objects(not the actual image). So in template, you need to iterate through that collection of objects and get the image url(again, not the actual image). Using that image url, you can show the image in `img` tag. For some `ImageModel` object, you might not have any image, that could be a reason to see broken image. – ruddra Jan 09 '19 at 11:06
  • If I don't have any Image it shouldn't be returning the image.id to this /media/uploadImage/back.jpg . Right now I'm trying this https://stackoverflow.com/questions/16307307/django-admin-show-image-from-imagefield – Arsh Ergon Jan 09 '19 at 11:30