gpt4 book ai didi

python - 如何在子标题下正确显示图像

转载 作者:太空宇宙 更新时间:2023-11-04 06:22:26 26 4
gpt4 key购买 nike

我正在构建一个非常简单的 web 应用程序(使用 python flask),它将向用户显示一些图像。如何在子标题下正确显示图像?

当前 my current output

预期 enter image description here

从 Flask 应用程序返回的字典

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

显示.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>

最佳答案

我能够通过移动 <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>

关于python - 如何在子标题下正确显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55369425/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com