Flaskを使ってみる

staticディレクトリの追加


Flaskではこのように簡単にイメージを表示することができます。


テンプレートファイルに表示したいイメージファイルを記述するだけです。
ただし、必ずイメージファイルはstaticディレクトリに置く必要が有ります。
<!DOCTYPE html>
   <head>
      <title>image in flask</title>
   </head>

   <body>
      <img src="/static/Flask.png" alt="Flask.png">
   </body>
</html>

flaskでは静的なファイルは全てstaticディレクトリの下に配置しないと、テンプレートエンジンがファイルを参照する事ができません。
例えばイメージをimagesディレクトリにコピーして、テンプレートを変更してもイメージが正しく表示されません。
<!DOCTYPE html>
   <head>
      <title>image in flask</title>
   </head>

   <body>
<!---
        <img src="/static/Flask.png" alt="Flask.png">
-->
        <img src="/images/Flask.png" alt="Flask.png">
   </body>
</html>



イメージファイルが見つからないので代替メッセージだけが表示されます。


こちらに static以外のディレクリを静的ディレクトリに追加する手順が公開されています。
imagesを静的ディレクトリに追加する場合は以下の様になります。
#!/usr/bin/env python
# -*- coding: utf-8 -*-

from flask import Flask, render_template, Blueprint

app = Flask(__name__)

# Added /images to static_url_path
add_app = Blueprint("images", __name__, static_url_path='/images', static_folder='./images')
app.register_blueprint(add_app)

@app.route("/")
def hello():
    return render_template('static.html')

if __name__ == "__main__":
    #app.run()
    app.run(host='0.0.0.0', port=8000, debug=True)

これでimages/Flask.pngが表示されるようになります。


テンプレート内で使える関数にurl_for()が有ります。
こちらに公式 のドキュメントが有りますが、なんだかよく分かりません。
以下の様にするとstaticフォルダからFlask.pngを探してパスとして登録してくれます。
<!DOCTYPE html>
   <head>
      <title>image in flask</title>
   </head>

   <body>
<!---
        <img src="/static/Flask.png" alt="Flask.png">
        <img src="/images/Flask.png" alt="Flask.png">
-->
        <img src="{{url_for('static', filename='Flask.png')}}" alt="Flask.png">
   </body>
</html>

続く．．．