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)
    <b>return [{'name':filename, 'url':rand_dir + filename} for filename in random.sample(files, count)]</b>

в вызове шаблона {{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>