Flaskを使っていると、画像が表示されないことがあるかもしれません。そのような時は、
- 画像ファイルへのPATHを見直す
- 画像ファイル名が合っているか見直す
この2つを見直す前に、まず見直さなければいけないことがあります。
デフォルト状態では、画像ファイルはstaticフォルダに配置する必要があります。
静的ファイルはstaticフォルダに配置する、というごく基本的なことなのですが、知らないとなぜ画像が表示されないのかわからなくて、結構はまります。
初めてFlaskを使うときに、staticフォルダの説明を見た気がするのですが、すっかり忘れていました。
もくじ
staticフォルダに配置するもの
- CSS
- JavaScript
- 画像やPDFなど
階層のイメージ
配置するファイルの階層はこんな感じです。
├── app.py
├── static
│ ├── css
│ │ └── style.css
│ ├── image
│ │ └── sample.jpg
│ └── js
│ └── jquery-3.6.0.min.js
└── templates
└── index.htmlstaticフォルダの変更
staticフォルダは変更することも出来ます。
app = Flask(__name__, static_folder = 'sample')
上記の例では、sampleフォルダに変更しています。
staticフォルダの追加
static_folder = ‘sample’ ではstaticフォルダを変更するだけで、追加できるわけではありません。画像ファイルだけ別フォルダに変更したいなど、staticフォルダを追加したい時があります。そのような時は、Blueprintを使ってstaticフォルダを追加します。
階層のイメージ
├── app.py
├── bptest
│ └── bp_test.py
├── static
│ └── sample.img
├── templates
│ ├── index.html
│ └── bp_index.html
└── bpimg
└── bp_sample.jpgファイル
app.py
bptest/bp_test.py
from flask import Blueprint,render_template
bp = Blueprint('bp_test',__name__, static_folder='../bpimg')
@bp.route('/bp_index')
def search():
return render_template('bp_index.html')
bp_test.pyファイルをapp.pyファイルと同じフォルダに置く場合は、static_folder=’./bpimg’にして、ドット (.) を1つにします。（そのときは、app.pyでbp_test.pyのimportも変更する必要があります。）
├── app.py
├── bp_test.py
bp = Blueprint('bp_test',__name__, static_folder='./bpimg')
templates/index.html
<img src="../static/sample.jpg">
templates/bp_index.html
<img src="../bpimg/bp_sample.jpg">
このコードの動作は、ローカル環境で確認しています。レンタルサーバーでは、CGIを間に挟むのでPATHのドット(.)の部分が変わるかもしれません。
templatesフォルダの変更
templatesフォルダも同じように変更することができます。
app = Flask(__name__, template_folder = 'test')
from flask import Flask, render_template from bptest import bp_test app = Flask(__name__) app.register_blueprint(bp_test.bp) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True)