Pythonで画像ファイルをリストでまとめて、HTMLで一覧表示する方法

前提・実現したいこと

タイトルの通りですが、画像（jpgファイル）が入ったフォルダを対象にPythonで画像ファイルをリストとしてまとめ、それらの画像をWeb上で画像一覧として表示する動作を目指しています。

Pythonから送られてくるリストをHTMLで受け取り、リスト内の画像を表示していく。という手法がそもそもあっているのか、という問題もありますが。。
もし、何か良い手法がありましたら教えて欲しいです。

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

現状、HTML側に送られてきたリストを受け取り処理するコードがかけていないので、エラーの原因はわかっているのですが、改善方法が分かりません。

TypeError: 'list' object is not callable
The view function did not return a valid response. The return type must be a string, tuple, Response instance, or WSGI callable, but it was a list.

該当のソースコード

python
1# -*- coding: utf-8 -*-
2from flask import Flask
3import glob
4
5app = Flask(__name__)
6
7@app.route('/camera_capture')
8def capture():
9    data=glob.glob('/media/pi/NAS/camera_data/*.jpg')
10    cap_data = []
11    for i in data:
12        cap_data.append(i)
13    return cap_data

以下のHTMLは、上記に示したPythonファイルからrenderされています。
今回、問題なのは<script>以降の部分で、ここで呼び出している「/camera_capture」のURLに反応するHTMLが問題です。

HTML
1{% extends "layout.html" %}
2
3{% block title %}
4Camera
5{% endblock %}
6
7{% block headline %}
8{{ title }}
9{% endblock %}
10
11{% block content %}
12    <img src = "{{url_for('camera.predict')}}">
13    <form><input type="button" value="取得画像を開く" onClick="win_open()"></form> 
14
15    <script type="text/javascript">
16    function win_open() {
17        window.open("/camera_capture","capture","width=600,height=450"); 
18    }
19    </script>
20    
21    <p><a href="/">BACK</a></p>
22{% endblock %}
23
24{% block footer %}
252020.
26{% endblock %}

以下が、「/camera_capture」に反応するHTMLファイルです。初めに記したPythonコードの紐付けられたファイルです。原因と思われる部分にコメントしています。

HTML
1{% extends "layout.html" %}
2
3{% block title %}
4Camera
5{% endblock %}
6
7{% block headline %}
8Camera Capture.
9{% endblock %}
10
11{% block content %}
12    <img src = "{{url_for('camera.capture')}}"> #ここが原因？
13    <p><a href="/">BACK</a></p>
14{% endblock %}
15
16{% block footer %}
172020.
18{% endblock %}

補足情報（FW/ツールのバージョンなど）

開発は、Flaskで行っています。

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

回答1件

ベストアンサー

質問がよくわかりません・・・

単にlistを返したいだけなら、以下の/camera_capture2のようにjsonify()で囲んで返してください。

window.open()は使ったことがないですが、以下(python: /index, /camera_capture, index.html, camera_capture.html)のコードを実行し、/indexにアクセスするとポップアップでcamera_capture.htmlが表示されましたので、こんな感じでいかがでしょうか？
(なお、Chromeがポップアップをブロックしてきたので許可が必要です。)

python
1# app.py
2from flask import Flask, render_template, jsonify
3import glob
4
5
6app = Flask(__name__)
7
8
9@app.route('/index')
10def show_html():
11    return render_template('index.html')
12
13
14@app.route('/camera_capture')
15def camera_capture():
16    data = glob.glob('images/*.jpg')
17    return render_template('camera_capture.html', data=data)
18
19
20@app.route('/camera_capture2')
21def camera_capture2():
22    data = glob.glob('images/*.jpg')
23    return jsonify(data)
24
25
26if __name__ == '__main__':
27    app.run()

html
1<!-- index.html -->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <title>Title</title>
7</head>
8<body>
9    <script type="text/javascript">
10    function win_open() {
11        window.open("/camera_capture","capture","width=600,height=450");
12    }
13    window.onload = function() {
14        win_open();
15    }
16    </script>
17</body>
18</html>

html
1<!-- camera_capture.html -->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <title>Title</title>
7</head>
8<body>
9<ol>
10    {% for n in data %}
11        <li>{{ n }}</li>
12    {% endfor %}
13</ol>
14</body>
15</html>

回答が想定と異なる場合は、現象が再現する最小のコードを提示ください。(今の質問文のコードは実行できません。)
その際は、tasojiroさんの頭の中だけにある情報を可能かぎり質問に記載ください。(実行環境、実行方法、ディレクトリ構造など)

2020/12/08 11:12追記

imgで表示したい場合は、以下で可能です。
上のindex.htmlおよび下のapp.py, camera_capture.htmlを使います。
jpgを置くフォルダは、imagesです。
配置としては以下になります。

text
1root
2├ images
3│ ├ 1.jpg
4│ └ 2.jpg
5├ templates
6│ ├ index.html
7│ └ camera_capture.html
8└ app.py

staticフォルダにimages(jpg)を配置する場合は、/imagesをBlueprintで追加しなくてOKです。

python
1# app.py
2from flask import Flask, render_template, Blueprint
3import glob
4import os
5
6add_static = Blueprint('images', __name__, static_url_path='/images', static_folder='./images')
7app = Flask(__name__)
8app.register_blueprint(add_static)
9
10
11def basename(path):
12    return os.path.basename(path)
13
14
15app.jinja_env.filters['basename'] = basename
16
17
18@app.route('/index')
19def show_html():
20    return render_template('index.html')
21
22
23@app.route('/camera_capture')
24def camera_capture():
25    data = glob.glob('images/*.jpg')
26    return render_template('camera_capture.html', data=data)
27
28
29if __name__ == '__main__':
30    app.run()

html
1<!-- camera_capture.html -->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <title>Title</title>
7</head>
8<body>
9    {% for n in data %}
10        <img src="{{ n }}" alt="{{ n|basename }}">
11    {% endfor %}
12</body>
13</html>

なお、app.pyの内、以下の部分については、imgにalt属性を追加する際にファイル名を指定したかったから追加したものなので読み飛ばしていただいてかまいません。

import os
def basename(path):
    return os.path.basename(path)


app.jinja_env.filters['basename'] = basename

投稿2020/12/07 07:38

編集2020/12/08 02:21

FiroProchainezo

総合スコア2401

tasojiro

2020/12/07 13:06

質問意図を上手く伝えられずに申し訳ありません。。しかし、回答者さんの記してくれた回答がとても参考になりました。「camera_capture」と「camera_capture2」をどちらとも試しましたが、結果として、「camera_capture」の方で、表示結果が（○○.jpg）という表記で出てしまいました。これらを画像として出力したいと考えています。 camera_capture.htmlの<li></li>部分に、<img>タグを埋め込むような手法を取れば良いでしょうか？

tasojiro

2020/12/09 05:51

追記を参考に、色々試させていただきました。 Blueprintでの実装は、元々Blueprintを使用してしまっており重複が原因（？）でエラーを吐いてしまいました。具体的なエラーは「attributeエラーで、レジスターで登録することが出来ない」ようなものでした。なので、staticファイルに画像フォルダを作成し、試してみましたが上手く動作しませんでした。これは、エラーはなくパスが確認できなかったのでがただ画像が確認できなかったような症状になってしまいました。現在は、ファイルをPCからAWSにアップロードし、実行環境が変わってしまったので、追記の情報を元にもう少し試行錯誤してみたいと思います。また、問題が明確に判明し次第、別枠で投稿させていただきます。具体的な回答と解説、ありがとうございました！

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