はじめに

普段はwebアプリを制作するのに，herokuでFlaskを動かして遊んでいます．

初歩的なことですが，単なる画像をhtmlで表示するのに
少しつまずいたので，備忘録として残しておきます．

いろんな要因で画像が表示されない場合があると思いますが，
その場合は，以下のようなマークが出ると思います．

原因としては，ファイル名を間違えていたり...，ファイル自体が存在していなかったり...

TL;DR

"static_folder"で静的なファイルの置き場所を明示してあげると動く場合があります．

app = Flask(__name__, static_folder='./templates/images')

詳細

細かい状況をまとめます．

ファイル構造

Flaskのコードの配置は，以下のようになっています．

workspqce/
├── main.py
└── template/
    ├── home.html
    └── images/
    　   　　└── test.png

HTMLのテンプレート

HTMLのテンプレートでは，画像の挿入を以下のように指定しています．

home.html

...
 <img src={{ image_path }} alt="xxx" title="xxx">  
...

Flaskでテンプレートを呼ぶ

上記のHTMLを以下のように，Pythonで呼んで動かしてあげます．

main.py

# -*- coding: utf-8 -*-                                                            
from flask import Flask, render_template, request 
import os
import ast

app = Flask(__name__)

@app.route('/home', methods=['POST'])                                              
def home():
    img_path = 'images/test.png'
    return render_template('home.html', title='HOME', image_path=img_path)

if __name__ == '__main__':                                                         
    port = int(os.getenv("PORT", 80))                                            
    app.run(debug=True, host='0.0.0.0', port=port)

いっけん，このコードで動きそうですが，動かなかったです．

なぜなら，静的なデータは，flaskのインスタンス化をする時点で，
明記してあげないといけないみたいです．

解決方法

以下のようにして，静的なファイルのディレクトリを記述して，インスタンス化すると
無事画像が表示されました．

app = Flask(__name__, static_folder='./templates/images')