Django 在模板中顯示圖像和圖像文件名

Question

我正在嘗試顯示多個圖像 (20 - 30)，同時還顯示圖像文件。

我顯示了圖像，但我不確定如何讓圖像文件名顯示在它旁邊/下面。

我是 Django 的新手。

這是我到目前為止所做的：

模板.html

   <div class="container-fluid my-container">
    {% filter_images_normal 6 as images %}

    <div class="row no-pad display-flex  my-row">
        {% for image in images %}
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col- my-col my-col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 my-col">
                <input class="img-thumbnail" type="image" id="image" alt="Image" src="{{ MEDIA_URL}}{{ image }}">
              <p>Image name file here</p>
            </div>
        {% endfor %}
    </div>
</div>

filter_images.py （模板標簽）

@register.simple_tag
def filter_images_normal(count=3):
    valid_extensions = ('.jpg', '.jpeg', '.png', '.gif')
    rand_dir = '/static/app_filter/images/normal/'
    path = '/app_filter/static/app_filter/images/normal/'

    files = [f for f in os.listdir(settings.BASE_DIR + path)
             if f[f.rfind("."):] in valid_extensions]

    # print(random.sample(files, count))
    print(rand_dir)
    return [rand_dir + filename for filename in random.sample(files, count)]

Answer 1

將圖像作為模板標簽中的字典列表傳遞：

@register.simple_tag
def filter_images_normal(count=3):
    valid_extensions = ('.jpg', '.jpeg', '.png', '.gif')
    rand_dir = '/static/app_filter/images/normal/'
    path = '/app_filter/static/app_filter/images/normal/'

    files = [f for f in os.listdir(settings.BASE_DIR + path)
             if f[f.rfind("."):] in valid_extensions]

    # print(random.sample(files, count))
    print(rand_dir)
    return [{'name':filename, 'url':rand_dir + filename} for filename in random.sample(files, count)]

在模板調用{{image.url}}和{{image.name}}

<div class="row no-pad display-flex  my-row">
    {% for image in images %}
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col- my-col my-col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 my-col">
            <input class="img-thumbnail" type="image" id="image" alt="Image" src="{{ MEDIA_URL}}{{image.url}}">
          <p>{{ image.name }}</p>
        </div>
    {% endfor %}
</div>