django 图像网格中显示了多个图像

Question

I am somewhat new to Django. I am making an image grid (html). But the images are shown multiple times in that grid. This is what I mean;

Here are my files;

Views.py

from django.shortcuts import render

photos = [
    {
        'user_im': 'https://thumbor.forbes.com/thumbor/fit-in/416x416/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5f47d4de7637290765bce495%2F0x0.jpg%3Fbackground%3D000000%26cropX1%3D1398%26cropX2%3D3908%26cropY1%3D594%26cropY2%3D3102',
        'photo': 'https://images.unsplash.com/photo-1515199967007-46e047fffd71?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=975&q=80',
        'date_shared': '4th January, 2020',
        'caption': 'A wonderful pic',
    },
    {
        'user_im': 'https://cdn.britannica.com/67/19367-050-885866B4/Valley-Taurus-Mountains-Turkey.jpg',
        'photo': 'https://images.unsplash.com/photo-1547500135-9f6e5a9a6aff?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80',
        'date_shared': '4th January, 2020',
        'caption': 'A nice picture',
    },
    {
        'user_im': 'https://cdn.britannica.com/67/19367-050-885866B4/Valley-Taurus-Mountains-Turkey.jpg',
        'photo': 'https://i.guim.co.uk/img/media/6088d89032f8673c3473567a91157080840a7bb8/413_955_2808_1685/master/2808.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=412cc526a799b2d3fff991129cb8f030',
        'date_shared': '4th January, 2020',
        'caption': 'A nice picture',
    }
]

def home(request):
    context = {
        'photos': photos,
    }
    return render(request, 'photos/home.html', context)

def explore(request):
    context = {
        'photos': photos,
    }
    return render(request, 'photos/explore.html', context)

grid.py

{% extends 'photos/base.html' %}
{% block content %}

    <h1><strong>These are some of the best</strong></h1>
    <h5 class="text-muted">Just for you...</h5>

    {% for photo in photos %}

        <div style="width:100%">
            {% for photo in photos %}

                <div style="float:left; width:200px; height:200px;">
                    <img src="{{ photo.photo }}" height="200px" width="200px">
                </div>
                
            {% endfor%}
        </div>

    {% endfor %}

{% endblock content %}

app urls.py

from django.urls import path, include
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('grid/', views.grid, name='grid'),
]

I am passing in some context. Will it be fixed if I upload the images?

Please give me a solution to this. Thank you.

Answer 1

They are showing up multiple times because you have a nested for loop. Pick one or the other, but not both, and you will end up with one of each image.

{% for photo in photos %} <-- loop one (for the rows)

    <div style="width:100%">
        {% for photo in photos %} <-- loop two (for the columns)

            <div style="float:left; width:200px; height:200px;">
                <img src="{{ photo.photo }}" height="200px" width="200px">
            </div>
            
        {% endfor%}
    </div>

Answer 2

This happens because you have done two loop. Use only once