How to display image using django-CodePudding

I am having trouble on how to display an image on html? i just want to display all image that saves on my database

{% for banner in banners %}
<div >
  <div >1 / 3</div>
  <img  src="{{ banner.banner }}" style="width:100%">
  <div >{{banner.title}}</div>
</div>
{% endfor %}

model

class Banner(models.Model):
    banner = models.ImageField(upload_to='image/', null=True, blank=True)

views

def homepage(request):
    banners = Banner.objects.all()
    return render(request, 'mysite/homepage.html', {'banners': banners})

result

enter image description here

CodePudding user response：

Use the 'url' property of the ImageField.

Try this:

{{ banner.banner.url }}

CodePudding user response：

models.py

class Banner(models.Model):
    banner = models.ImageField(upload_to='image/', null=True, blank=True)

    def get_banner_url(self):
        return self.banner.url

html

{% for banner in banners %}
<div >
  <div >1 / 3</div>
  <img  src="{{ banner.get_banner_url }}" style="width:100%">
  <div >{{banner.title}}</div>
</div>
{% endfor %}

for be sure that your URL is coming try this(just for test):

 <div >{{banner.get_banner_url }}</div>

if you can't see the URL that means it is about your media tags settings.py

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

main urls.py

urlpatterns = [  
  #your paths  
] static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)