多个图像显示在 Django 图像网格中答案

【问题标题】：Multiple images are showing in django image grid多个图像显示在 Django 图像网格中
【发布时间】：2021-01-06 14:39:22
【问题描述】：

我对 Django 有点陌生。我正在制作一个图像网格（html）。但是图像在该网格中多次显示。这就是我的意思；

这是我的文件；

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 %}

应用 urls.py

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

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

我在某些情况下传递。如果我上传图片会修复吗？

请给我一个解决方案。谢谢。

【问题讨论】：

标签： python html django django-templates

【解决方案1】：

发生这种情况是因为您已经完成了两个循环。只用一次

【讨论】：

或者在谷歌上搜索bootstrap grid并使用

【解决方案2】：

它们多次出现是因为你有一个嵌套的 for 循环。选择一个或另一个，但不能同时选择两者，您最终会得到每张图片中的一张。

{% 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>

【讨论】：