如何在子标题下正确显示图像答案

【问题标题】：How to display properly images under sub headers如何在子标题下正确显示图像
【发布时间】：2019-08-17 13:27:55
【问题描述】：

我正在构建一个非常简单的 webApp（使用 python 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>

【问题讨论】：

标签： python html css flask jinja2

【解决方案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>

【讨论】：

我很累，但输出不像我预期的那样{% 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 %} 图像歪斜