运行for循环获取图像时未显示图像

Question

我在index.html文件中有一个for循环，用于从images文件夹中动态获取三个对象的图像

但它只获取第一个图像，服务器上会为其他两个“目标”对象显示缺少的图像图标。在index.html和views.py文件中是否有突出的错误

所有三个图像都是在硬编码时显示的，并且都存在于images文件夹中。自从我介绍了{% static "images" as baseUrl %}和for loop之后，它就不起作用了。 奇怪的是，它确实加载了第一个图像，但没有加载图像2和图像3

我还尝试： src = "static/images/{{dest.img}}"而不是src = "{% static 'images/{{dest.img}}' %}，这不起作用

以下是for loop代码，其中包含index.html中的顶级导入：

{% load static %}
{% static "images" as baseUrl %}


                {% for dest in dests %}

                <!-- Destination -->
                <div class="destination item">
                    <div class="destination_image">
                        <img src="{{baseUrl}}/{{dest.img}}" alt="">
                        <div class="spec_offer text-center"><a href="#">Special Offer</a></div>
                    </div>
                    <div class="destination_content">
                        <div class="destination_title"><a href="destinations.html">{{dest.name}}</a></div>
                        <div class="destination_subtitle"><p>{{dest.desc}}</p></div>
                        <div class="destination_price">From ${{dest.price}}</div>
                    </div>
                </div>

                {% endfor %}

在my views.py文件中：

from django.shortcuts import render
from .models import Destination


def index(request):

    dest1 = Destination()
    dest1.name = 'New York'
    dest1.desc = 'City that never sleeps'
    dest1.img = 'destination_1.jpg'
    dest1.price = 500

    dest2 = Destination()
    dest2.name = 'Mumbai'
    dest2.desc = 'Great nightlife'
    dest1.img = 'destination_2.jpg'
    dest2.price = 800

    dest3 = Destination()
    dest3.name = 'Paris'
    dest3.desc = 'The City Of Culinary Delights'
    dest1.img = 'destination_3.jpg'
    dest3.price = 700

    dests = [dest1, dest2, dest3]
    #     'dest1': dest1,
    #     'dest2': dest2,
    #     'dest3': dest3,
    # }

    return render(request, 'index.html', {'dests': dests})

Answer 1

我明白了，变量赋值有问题。这就是为什么它没有为{{dest.img}}返回任何字符串，因此无法链接到图像。您分配了dest1.img多个。请参阅固定解决方案：

def index(request):

    dest1 = Destination()
    dest1.name = 'New York'
    dest1.desc = 'City that never sleeps'
    dest1.img = 'destination_1.jpg'
    dest1.price = 500

    dest2 = Destination()
    dest2.name = 'Mumbai'
    dest2.desc = 'Great nightlife'
    dest2.img = 'destination_2.jpg' # wrong variable assignment
    dest2.price = 800

    dest3 = Destination()
    dest3.name = 'Paris'
    dest3.desc = 'The City Of Culinary Delights'
    dest3.img = 'destination_3.jpg' # wrong variable assignment
    dest3.price = 700

    dests = [dest1, dest2, dest3]
    #     'dest1': dest1,
    #     'dest2': dest2,
    #     'dest3': dest3,
    # }

    return render(request, 'index.html', {'dests': dests})

Answer 2

如果您的图像被上传，您无法像这样获取它dest.img只需像dest.img.url那样操作，无需加载此{% static "images" as baseUrl %} 因为这是在您从静态镜像图像时使用的，但是当您开始处理数据库并上载图像时，您必须像下面这样做

{% load static %}

                {% for dest in dests %}

                <!  Destination  >
                <div class="destination item">
                    <div class="destination_image">
                        <img src="{{dest.img.url}}" alt="">
                        <div class="spec_offer text-center"><a href="#">Special Offer</a></div>
                    </div>
                    <div class="destination_content">
                        <div class="destination_title"><a href="destinations.html">{{dest.name}}</a></div>
                        <div class="destination_subtitle"><p>{{dest.desc}}</p></div>
                        <div class="destination_price">From ${{dest.price}}</div>
                    </div>
                </div>

                {% endfor %}

如果这对你没有帮助，请告诉我是否还有其他帮助