How to show multiple images from models through loop in django templete

Question

I am trying to create a page where I can show product details with an image from my data models using a loop in Django model, but when I go item list it's work for details except image, in image section, it shows alt text. please help me.

my models:

class Category(models.Model):
    name = models.CharField(max_length=50)

    def __str__(self):
        return self.name


class Item(models.Model):
    name = models.CharField(max_length=150)
    category = models.ForeignKey(Category, on_delete=models.CASCADE)
    is_active = models.BooleanField(default=True)
    model_pic = models.ImageField(upload_to = 'static/media/')

    def __str__(self):
        return self.name

my views:

def item_list(request, category_id):
    category_name = Category.objects.get(pk=category_id)
    list_items = Item.objects.filter(category=category_name)
    context = {
       'list_items': list_items,
    }
    return render(request, 'inventory/item_list.html', context)

my templete:

{% for item in list_items %}
       <tr>
           <td>{{ forloop.counter }}</td>
           <td>{{ item.name }}</td>
           <td>{{ item.category }}</td>
           <td>{{ item.is_active }}</td>
           <td><a href="{% url 'item_delete' item.pk %}">Delete</a></td>
           <td><img src="{{ item.model_pic.url }}" alt="Photo"></td>
        </tr>
 {% endfor %}

output:enter image description here

Aaron Hampton · Accepted Answer · 2018-09-12 02:36:45Z

2

If this is happening during development, make sure your application is configured to serve media. Update your url configuration. For example:

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # ... the rest of your URLconf goes here ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

For more info, see:

https://docs.djangoproject.com/en/2.1/howto/static-files/#serving-files-uploaded-by-a-user-during-development

If that is already configured, check the source of your file to see what is being displayed. "Photo" is showing because the web browser cannot locate the image.

edited Sep 12, 2018 at 2:36

answered Sep 12, 2018 at 2:30

Aaron Hampton

8948 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

schrodingerscatcuriosity Over a year ago

@MasudMorshed add {{ MEDIA_URL }} to your links: src="{{ MEDIA_URL }}{{ item.model_pic.url }}"

Ansif_Muhammed · Accepted Answer · 2019-08-30 10:39:00Z

0

def item_list(request, category_id):
    category_name = Category.objects.get(pk=category_id)
    list_items = Item.objects.filter(category=category_name)
    context = {
       'list_items': list_items,
    }
    return render(request, 'inventory/item_list.html', context)

here the context dictionary will be apssed to the corresponding url item_list.html

in settings you have to decalre your static parameters, once done; In item_list.html. you have to use {% static %} and then loop through your context elements. in

 <img src="{% static variable %}" %}>

answered Aug 30, 2019 at 10:39

Ansif_Muhammed

4364 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to show multiple images from models through loop in django templete

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related