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>

在此代码段中，将对三张图片进行排序。如果你有超过三个，你应该使查询集 "smarter"（即简单的获取将不起作用）。

URL:

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

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

Django template displaying images in wrong position

python

django

django-models

django-template-filters