Django 프런트 엔드 루프 가로채기 데이터 표시

웹사이트를 만들 때 웹사이트의 원본 템플릿은 세 장의 사진을 표시해야 합니다.모델을 정의할 때 저장할 해당 사진을 정의합니다.

class ApplicationRelatedImage(models.Model):
    image = models.ImageField(upload_to=application_directory_path, verbose_name="应用相关图片", blank=True,
                              null=True)
    application = models.ForeignKey(Application, on_delete=models.CASCADE, blank=True, null=True)

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

    class Meta:
        verbose_name = "应用相关图片"
        verbose_name_plural = verbose_name

프런트엔드 표시를 할 때 사진은 루핑 호출로 표시할 수 있지만 3장의 사진은 각각의 스타일이 있고 forloop.counter를 사용하여 수행할 수 있는 루프를 직접 사용하여 스타일을 변경할 수 없습니다.

{
    
    % for image in application.applicationrelatedimage_set.all %}
                    {
    
    % if forloop.counter == 1 %}
                        <li class="pull_left"><img src="{
    
    { image.image.url }}" width="291" height="197"
                                                   alt=""/>
                        </li>

                    {
    
    % endif %}
                    {
    
    % if forloop.counter == 2 %}
                        <li class="pull_right"><img src="{
    
    { image.image.url }}" width="212" height="197" alt=""
                                                    class="frist"/></li>

                    {
    
    % endif %}
                    {
    
    % if forloop.counter == 3 %}
                        <li class="pull_right"><img src="{
    
    { image.image.url }}" width="212" height="197" alt=""
                                                    class="frist"/></li>

                    {
    
    % endif %}
                {
    
    % empty %}
                    <div class="no-post">暂时还没有banner图片！</div>
                {
    
    % endfor %}

참조 링크

Django 프런트 엔드 루프 가로채기 데이터 표시