Django模板在错误的位置显示图像

Question

我是 Django 新手，如果这个很愚蠢，我深表歉意。我有一个 Django 模板，其中包含三个图像位置，我试图让管理员用户选择数据库中的哪个图像应该放在哪个位置（左、中或右）。不过，

我的模型如下所示：

from django.db import models
from django.urls import reverse
from django.utils.text import slugify

class Artwork(models.Model):

    art = models.ImageField(upload_to='artworks/%Y')
    title = models.CharField(max_length=200)
    description = models.TextField(null=True, blank=True)
    date = models.DateField(auto_now_add=True)
    herochoices = [('left', 'left'), ('middle', 'middle'), ('right', 'right')]
    hero = models.CharField(choices=herochoices, max_length=6, unique=True, null=True, blank=True, error_messages={'unique':'Another artwork already uses this hero position.'})  
    slug = slugify(title, allow_unicode=False)

    def get_absolute_urls(self):
        return reverse('artwork_list', kwargs={'slug': self.slug})

我的模板如下所示：

{% extends 'base.html' %}

{% block content %}

<div class="container">
    <div class="row">
        {% for artwork in object_list %}
            {% if artwork.hero == 'left' %}
                <div class="col-sm p-3 align-items-center">
                    <img class="img-fluid rounded" src="{{ artwork.art.url }}" />
                    <p>{{ artwork.hero }}</p> <!--for testing-->
                </div>
            {% elif artwork.hero == 'middle' %}
                <div class="col-sm p-3 align-items-center">
                    <img class="img-fluid rounded" src="{{ artwork.art.url }}" />
                    <p>{{ artwork.hero }}</p> <!--for testing-->
                </div>
            {% elif artwork.hero == 'right' %}
                <div class="col-sm p-3 align-items-center">
                    <img class="img-fluid rounded" src="{{ artwork.art.url }}" />
                    <p>{{ artwork.hero }}</p> <!--for testing-->
                </div>
            {% endif %}
        {% endfor %}
    </div>
</div>

{% endblock content %}

由于某种原因，图像的显示顺序错误：

我一直在看这个，非常感谢任何帮助！

Answer 1

您使用 Django 生成的模板不是以下模板，因为 for 循环只是遵循查询集项目的顺序。

<div class="container">
  <div class="row">
    <div class="col-sm p-3 align-items-center">
      <img class="img-fluid rounded" src="{{ LEFT URL }}" />
      <p>{{ LEFT HERO }}</p>
    </div>
    <div class="col-sm p-3 align-items-center">
      <img class="img-fluid rounded" src="{{ MIDDLE URL }}" />
      <p>{{ MIDDLE HERO }}</p>
    </div>
    <div class="col-sm p-3 align-items-center">
      <img class="img-fluid rounded" src="{{ RIGHT URL }}" />
      <p>{{ RIGHT URL }}</p>
    </div>
  </div>
</div>

在这个 sn-p 中，将订购三个图像。如果您有超过三个，您应该使查询集“更智能”（即简单的 get 不起作用）。

网址：

def example(request):
    qs = Artwork.objects.all()
    objects_list = [qs.get(hero=position) for position in ["left", "middle", "right"]]
    return render("test.html", { "objects_list": objects_list})

HTML：

{% extends 'base.html' %}

{% block content %}

<div class="container">
  <div class="row">
    {% for artwork in object_list %}
    <div class="col-sm p-3 align-items-center">
      <img class="img-fluid rounded" src="{{ artwork.art.url }}" />
      <p>{{ artwork.hero }}</p>
      <!--for testing-->
    </div>
    {% endfor %}
  </div>
</div>

{% endblock content %}