回答編集履歴

imgを表示する場合の例を追加

2020/12/08 02:21

投稿

FiroProchainezo

スコア2401

test CHANGED Viewed

@@ -155,3 +155,161 @@
 回答が想定と異なる場合は、現象が再現する最小のコードを提示ください。(今の質問文のコードは実行できません。)
 その際は、tasojiroさんの頭の中だけにある情報を可能かぎり質問に記載ください。(実行環境、実行方法、ディレクトリ構造など)
+## 2020/12/08 11:12追記
+imgで表示したい場合は、以下で可能です。
+上の`index.html`および下の`app.py`, `camera_capture.html`を使います。
+jpgを置くフォルダは、`images`です。
+配置としては以下になります。
+```text
+root
+├ images
+│ ├ 1.jpg
+│ └ 2.jpg
+├ templates
+│ ├ index.html
+│ └ camera_capture.html
+└ app.py
+```
+staticフォルダにimages(jpg)を配置する場合は、`/images`をBlueprintで追加しなくてOKです。
+```python
+# app.py
+from flask import Flask, render_template, Blueprint
+import glob
+import os
+add_static = Blueprint('images', __name__, static_url_path='/images', static_folder='./images')
+app = Flask(__name__)
+app.register_blueprint(add_static)
+def basename(path):
+    return os.path.basename(path)
+app.jinja_env.filters['basename'] = basename
+@app.route('/index')
+def show_html():
+    return render_template('index.html')
+@app.route('/camera_capture')
+def camera_capture():
+    data = glob.glob('images/*.jpg')
+    return render_template('camera_capture.html', data=data)
+if __name__ == '__main__':
+    app.run()
+```
+```html
+<!-- camera_capture.html -->
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    {% for n in data %}
+        <img src="{{ n }}" alt="{{ n|basename }}">
+    {% endfor %}
+</body>
+</html>
+```
+なお、`app.py`の内、以下の部分については、imgにalt属性を追加する際にファイル名を指定したかったから追加したものなので読み飛ばしていただいてかまいません。
+```
+import os
+def basename(path):
+    return os.path.basename(path)
+app.jinja_env.filters['basename'] = basename
+```