如何在邮件的旋转木马中显示图像

2024-05-16 05:33:19 发布

您现在位置:Python中文网/ 问答频道 /正文

我创建了一个帖子,允许我上传多张图片,帖子包含标题、描述和图片,但我试图在这个模板中显示,但在每个帖子上显示的都是所有照片,而不仅仅是该帖子上传的照片

这是我的模板代码

{% for post in posts %}
<section class="container" style="margin-top: -0.8rem;">
    <div class="carousel-inner">
      <div style="background-color: #000000" class="card text-center">
        <div class="card-body">
          <h1 class="card-title" style="color: #FFFFFF; letter-spacing: 6px; font-size: 20px; margin-bottom: -0.7rem;">{{ post.title }}</h1>
        </div>
      </div>

      <div id="{{ post.id }}" class="carousel slide" data-interval="false" data-ride="carousel">
        <ol class="carousel-indicators">
          {% for p in photos %}
          <li data-target="#carouselExampleIndicators" data-slide-to="{{forloop.counter0}}" class="{% if forloop.counter0 == 0 %} active {% endif %}"></li>
          {% endfor %}
        </ol>
        <div class="carousel-inner" role="listbox">
          {% for p in photos %}
          <div class="carousel-item {% if forloop.counter0 == 0 %} active {% endif %}" style="background-color: #000000">
            <img class="d-block w-100" src="{{ p.image.url }}" alt="First slide">
          </div>
          {% endfor %}
        </div>
        <a class="carousel-control-prev" href="#{{ post.id }}" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#{{ post.id }}" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      <div style="background-color: #000000" class="card text-center">
        <div class="card-body">
          <p class="container" style="color: #FFFFFF; font-size: 10px; letter-spacing: 2px; text-align: justify; margin-top: -1rem;">{{post.description}}</p>
        </div>
      </div>
    </div>
</section>
{% endfor %}

这是型号代码------------------

class Photo(models.Model):
title = models.CharField(default='', max_length=200)
description = models.TextField()

def __str__(self):
    return self.title

class PhotoImage(models.Model):
    post = models.ForeignKey(Photo, default=None, on_delete=models.CASCADE)
    image = models.ImageField(upload_to='images/')

    def __str__(self):
        return self.post.title
    

这是查看代码------------------

class PhotographyListView(ListView):
    model = Photo
    model = PhotoImage
    template_name = 'photography.html'
    ordering = ['-id']

    def get_context_data(self, **kwargs):
        context = super(PhotographyListView, self).get_context_data(**kwargs)
        context['posts'] = Photo.objects.order_by('-id')
        context['photos'] = PhotoImage.objects.filter()
        return context

Tags: selfdividdatatitlestylemodelscontext
1条回答
网友
1楼 · 发布于 2024-05-16 05:33:19

在模板中,仅循环粘贴到帖子上的照片

{% for p in post.photoimage_set.all %}
   <li data-target="#carouselExampleIndicators" data-slide-to="{{forloop.counter0}}" class="{% if forloop.counter0 == 0 %} active {% endif %}"></li>
{% endfor %}

不再需要ListView中的PhotoImage查询

  • 为了减少额外的查询,您可能需要查找向Photo.objects.order_by('-id')查询添加prefetch_related的情况

相关问题 更多 >