Блог

Главная - Вопросы по программированию - Как правильно отображать изображения под вложенными заголовками

Как правильно отображать изображения под вложенными заголовками

#python #html #css #flask #jinja2

#python #HTML #css #flask #jinja2

Вопрос:

Я создаю очень простое веб-приложение (используя python flask), которое будет отображать некоторые изображения пользователю. Как правильно отображать изображения под вложенными заголовками?

ТЕКУЩИЙ
мой текущий вывод

ОЖИДАЕТСЯ
введите описание изображения здесь

словарь, возвращенный из приложения flask

 images:{'fish': ['/images/fish/Jellyfish.jpg'], 
             'mammal': ['/images/mammal/Koala.jpg']}
            }

show.html

 <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Image Gallery</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Images</h1>
                </div>
                <hr>
{% if images %}     
                  {% for key,value in image.items() %}
                    <h4>{{key}}<h4>
                    <hr> 
                    {% for image_name in value %}
                    <div class="col-lg-3 col-md-4 col-xs-6 thumb">                  
                    <img class="img-responsive" src=" {{url_for('send_image', filename=image_name)}}"> 
<hr>                </div>
                   {% endfor %}{% endfor %}{% endif %}
            </div>
        </div>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </body>
</html>

Ответ №1:

Я смог это исправить, переместив <div class="row"> внутрь {% for key,value in image.items() %} цикла for

Обновленный html

 <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Image Gallery</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <body>
        <div class="container">
            <div class="col-lg-12">
                <h1 class="page-header">Images</h1>
            </div>
            <hr>
            {% if images %}     
            {% for key,value in image.items() %}
            <div class="row">
                <h4>
                {{key}}
                <h4>
                <hr>
                {% for image_name in value %}
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                    <img class="img-responsive" src=" {{url_for('send_image', filename=image_name)}}"> 
                    <hr>
                </div>
                {% endfor %}
            </div>
            {% endfor %}{% endif %}            
        </div>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </body>
</html>

Ответ №2:

Вы можете попробовать это: в html:

 <div class="container">
  <div class="row">
    <div class="col-sm header">Fish</div>
  </div>
  <div class="row">
    <div class="col-sm image">
      //Image of fish
    </div>
  </div>
  <div class="row">
    <div class="col-sm header">Flower</div>
  </div>
  <div class="row">
    <div class="col-sm image">
      //Image of first flower
    </div>
    <div class="col-sm image">
      //Image of secondflower
    </div>
    <div class="col-sm image">
     //Image of thirdflower
    </div>
  </div>
</div>

в css:

 .header {
  border-bottom: 1px solid #e4e6e8;
  border-top: 1px solid #e4e6e8;
}

.image {
  border-bottom: 1px solid #e4e6e8;
}

.col-sm {
  padding: 10px;
}

Ответ №3:

Вот как бы я это сделал:

 <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Images</h1>
                </div>
                <hr>
{% if images %}     
                  {% for key,value in image.items() %}
                    <h4>{{key}}<h4>
                    <hr> 
                    {% for image_name in value %}
                    // have a condition here to check if its first image, then 
                     display it with a <div> tag.
                     if(first) {
                        <div class="col-lg-3 col-md-4 col-xs-6 thumb">                  
                    <img class="img-responsive" src=" {{url_for('send_image', 
                     filename=image_name)}}"> 
                       }
                    //end here
                    <div class="col-lg-3 col-md-4 col-xs-6 thumb">                  
                    <img class="img-responsive" src=" {{url_for('send_image', 
                       filename=image_name)}}"> 
<hr>                </div>
                   {% endfor %}{% endfor %}{% endif %}
            </div>
        </div>

Комментарии:

1. Я устал, но вывод не такой, как я ожидал {% if loop.index0 == 0 %} <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <img class="img-responsive" src=" {{url_for('send_image', filename=image_name)}}"> {% endif %} Изображения были искажены