HTML内で辞書を回して、画像を変数で指定し画像を表示させたい。

前提・実現したいこと

pythonで辞書を作成しHTMLに渡したのちに、HTML内で辞書に格納された画像URLを取得して表示させたいと考えています。

辞書には以下のように格納しています。
dict = {"title":画像URL, "title2":画像URL}
・key = タイトル
・value = 画像URL

HTMLで動作させたいのは以下です。
1.辞書を回して、各キーごとの画像URLを取得。
2.タイトルとその値である画像URLを画像として表示させる。

発生している問題・エラーメッセージ

該当箇所で以下のようなエラーが発生します。

//該当箇所
{% for key, value in popularity_contents.items %}

//エラーメッセージ
TypeError: 'builtin_function_or_method' object is not iterable

該当のソースコード

python
1from flask import Flask, render_template
2
3app = Flask(__name__)
4
5
6@app.route('/', methods=["GET"])
7def main():
8
9    title_dict = {'チェイシング・エイミー': 'https://images-na.ssl-images-amazon.com/images/I/51FN7KEN3ML.jpg', 
10                  'マイ・フェア・レディ': 'https://m.media-amazon.com/images/I/518FGTX2VNL._AC_SY445_.jpg',
11                  'ゴスフォード・パーク': 'https://m.media-amazon.com/images/I/6126va4gWPL._AC_.jpg'}
12
13return render_template('recommend.html', title_dict)
14

HTML
1!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>title</title>
6</head>
7<body>
8    <ul>
9        {% for key, value in popularity_contents.items %}
10        <li>
11        //ここが原因…？
12            {{ title_name }}
13            <img src="{{img_url}}">
14        </li>
15        {% endfor %}
16    </ul>
17
18</body>
19</html>

試したこと

HTML内の指定が原因だと思いますが、どのように修正すればよいか分かりませんでした。ご教授の程よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

・itemsではなく、items()だと思います。
・変数名を修正する必要があると思います。

（略）
<body>
    <ul>
        {% for title_name , img_url in popularity_contents.items() %}
        <li>
            {{ title_name }}
            <img src="{{img_url}}">
        </li>
        {% endfor %}
    </ul>

</body>
(略）

投稿2022/01/09 05:37