how to display uploaded files or images on template in django3

Question

I only see the file path in the template. I can't see the file itself. (django 3.x)

settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

model.py

class EkleModel (models.Model):
    aKaydi = models.CharField(max_length=50, verbose_name='A KAYDI')
    bKaydi = models.CharField(max_length=50, verbose_name='B KAYDI')
    cKaydi = models.CharField(max_length=50, verbose_name='C KAYDI')
    upload = models.FileField(upload_to='media/%Y/%m/%d/', verbose_name='DOSYA YÜKLE')
    yuklemeTarihi =models.DateTimeField(default =timezone.now)

views.py

def index(request):
    girdiler = EkleModel.objects.filter(yuklemeTarihi__lte=timezone.now()).order_by('-yuklemeTarihi')
    return render(request, 'sayfalarUygulamasi/index.html', {'girdiler': girdiler})

index.html

<img class="card-img-top" src="girdi.upload">
<h4 class="card-title">{{girdi.aKaydi}}</h4>
<h4 class="card-title">{{girdi.bKaydi}}</h4>
<h4 class="card-title">{{girdi.cKaydi}}</h4>
<h4 class="card-title">{{girdi.yuklemeTarihi}}</h4>

Answer 1

you have to loop through your queryset and .url to the image

{% for girdi in girdiler %}
  <img class="card-img-top" src="{{ girdi.upload.url }}">
  <h4 class="card-title">{{girdi.aKaydi}}</h4>
  <h4 class="card-title">{{girdi.bKaydi}}</h4>
  <h4 class="card-title">{{girdi.cKaydi}}</h4>
  <h4 class="card-title">{{girdi.yuklemeTarihi}}</h4>
{% endfor %}

Answer 2

try this

{% for girdi in girdiler %}
    <img class="card-img-top" src="{{me.upload.url}}">
{% endfor %}

and to your model

class EkleModel (models.Model):
    upload = models.FileField(upload_to='image/', null=True, blank=True,FileField)

urls.py

from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
...
]+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns +=static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

and do migrations

Answer 3

<img class="card-img-top" src="girdi.upload.url"> #像这样在字段名后添加url