実現したいこと
HTML上で画像ファイルごとにsectionなどで区切り表示させたいです。
しかし、現状では画像ファイルが3つの場合、3枚の画像が表示されたsectionタグが3つ作成されます。
前提
Flaskでwebアプリを作っています。
画像ファイルはs3上に保存しております。
viewsからtemplateに画像ファイルのurlが格納されたリストを渡し、HTML上でfor文を回して各画像ファイルの
urlを取得しております。
Python 3.11.1
Flask 2.2.3
発生している問題・エラーメッセージ
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="description" content="google_scholarから取得した論文の年度や引用件数での並べ替えや、引用件数の平均値・中央値を視覚的に把握できるようにしました"> 6 <meta name="viewport" content="width=device-width"> 7 <title>論文検索</title> 8 <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}"/> 9 <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"/> 10 </head> 11 12 <body> 13 <nav class="navbar navbar-expanding-lg navbar-dark bg-dark"> 14 <div class="container"> 15 <a class="navbar-brand" href="{{ url_for('scrapy.index') }}">論文検索</a> 16 <ul class="navbar-nav"> 17 {% if current_user.is_authenticated %} 18 <li class="nav-item"> 19 <span class="nav-link">{{ current_user.username }}</span> 20 </li> 21 <li class="nav-item"> 22 <a href="{{ url_for('auth.logout') }}" class="nav-link">ログアウト</a> 23 </li> 24 {% else %} 25 <li class="nav-item"> 26 <a class="nav-link" href="{{ url_for('auth.login') }}">ログイン</a> 27 </li> 28 <li class="nav-item"> 29 <a class="nav-link" href="{{ url_for('auth.signup') }}">新規登録</a> 30 </li> 31 {% endif %} 32 </ul> 33 </div> 34 </nav> 35 <section class="container"> 36 {% with messages = get_flashed_messages() %} 37 {% if messages %} 38 <ul> 39 {% for message in messages %} 40 <li class="flash">{{ message }}</li> 41 {% endfor %} 42 </ul> 43 {% endif %} 44 {% endwith %} 45 46 <!-- 画像アップロード画面へのリンクを追加する --> 47 <div class="col-md-10 text-right dt-image-register-btn"> 48 <a href="{{ url_for('scrapy.upload_word') }}" class="btn btn-primary">画像新規登録</a> 49 </div> 50 <!-- 画像一覧を表示する --> 51 {% for user_keyword in user_keywords %} 52 <div class="card col-md-7 dt-image-content"> 53 <header class="d-flex justify-content-between"> 54 <div class="dt-image-username">{{ user_keyword.UserKeyword.keyword }}</div> 55 <!-- 物体検知フォームを追加する --> 56 <div class="d-flex flex-row-reverse"> 57 <!-- 削除ボタンのフォームを追加する --> 58 <div class="p-2"> 59 <form action="{{ url_for('scrapy.delete_object', keyword_id=user_keyword.UserKeyword.id) }}" method="POST"> 60 {{ delete_form.csrf_token }} 61 {% if current_user.id == user_keyword.User.id %} 62 {{ delete_form.submit(class="btn btn-danger") }} 63 {% else %} 64 {{ delete_form.submit(class="btn btn-danger", disabled="disabled") }} 65 {% endif %} 66 </form> 67 </div> 68 </div> 69 </header> 70 {% for url in url_list %} 71 <section> 72 <img src="{{ url }}" alt="アップロード画像" /> 73 </section> 74 {% endfor %} 75 </div> 76 {% endfor %} 77 </section> 78 </body> 79</html>
試したこと
{% for url in url_list%}と{% endfor %}の位置が間違っているのかと考え、<section>の内側や外側に移動させてみましたが、特に変化はありませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント