6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Flaskで画像が表示されない(備忘録)

Last updated at Posted at 2021-07-14

#はじめに
普段はwebアプリを制作するのに,herokuでFlaskを動かして遊んでいます.

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

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

non_pic.jpg

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

#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') 
6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?