はじめに
前回の続き。やっぱり文字だけではなく画像も扱いたいと思ったので、色々いじっていきます。
環境
- windows10
- flask2.0.2
- python3.8.10
画像の表示
下記のようなファイル階層にしています。htmlファイルを利用して画像を読み込むため、templatesの下にimageディレクトリを作成しています。
directory/
|__flask～～.py
|__templates/
|__index.html
|__images/
|__～～.png
画像を読み込むときは、パスをきちんと通さないといけないとのことで、imgで設定しています。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
</head>
<body>
<title>Flask練習</title>
<font color="red"><h2>りんご</h2><font></span>
<img src="images/apple.png"> #画像のデータ
</body>
</html>
pyファイルではどこのフォルダから、画像を読み込むかの指定をしています。
#!/usr/bin/env python
# -*- coding: utf-8 -*-
from flask import Flask, render_template
app = Flask(__name__, static_folder='./templates/images')
@app.route('/')
def index():
return render_template('index.html') #htmlファイルの表示
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0', port=5000)
無事に表示できました。ただ・・・あきらかにでか過ぎる！
もっとバランスよくしたいので、画像サイズと位置の変更も実施することにします。
画像の変更
htmlファイル内でサイズと座標を指定します。
座標はひとまずstyleタグで設定していますが、本来はCSSで設定した方がいいらしいですね(でもここでは簡単な方に逃げる)
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
</head>
<body>
<title>Flask練習</title>
<font color="red"><h2>りんご</h2><font></span>
<div style="position:absolute; top:30px; left:130px">
<img src="images/apple.png" alt="写真" width="299" height="257">
</div>
</body>
</html>
これで再度pyファイルを実行すると、写真が変更されているのがわかります。
ちゃんと小さくなっていて、少し右上に配置されています。
応用～もう少しWebページに近づけてみた～
ただ画像だけ表示するのは味気ないので、頑張ってWebページのようなものを作ってみました。
カスタマイズするにはCSSから逃れられなかったので、苦しみながらなんとか設定しました。ファイルの階層は下の通りです。Flask内でCSSを適用するには、staticディレクトリからcssファイルを読み込必要があるのでこの構成です(なかなか難しい)。
directory/
|__flask～～.py
|__templates/
|__index.html
|__static/
|__style.css
|__images/
|__～～.jpg(png)
まずはCSSファイルの作成から。・・・しんどかったです。
body {
background-color:#CCFFFF;
}
h1 {
border-bottom: 40px solid #000055;
width: none;
text-shadow: 1px 2px 5px #333;
}
.cover {
width: 800px;
height: 534px;
background-image:url("images/star.jpg");
background-size:cover;
background-repeat:no-repeat;
}
div.radius1 {
border: 5px solid #333333;
text-align: center;
font-size: 40pt;
text-shadow: 1px 2px 5px #333;
line-height:0px;
border-radius: 10px;
margin-right: 10px;
width: 500px;
height: 100px;
padding: 10px;
display: inline-block;
position:relative;
bottom:500px;
left:900px;
background: #FFFFFF
}
div.radius2 {
border: 5px solid #333333;
text-align: center;
font-size: 40pt;
text-shadow: 1px 2px 5px #333;
line-height:0px;
border-radius: 10px;
margin-right: 10px;
width: 500px;
height: 100px;
padding: 10px;
display: inline-block;
position:relative;
bottom:200px;
left:355px;
background: #FFFFFF
}
htmlファイルはあまり変わりがないです。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<link rel="stylesheet" href="/static/style.css"> #CSS読み込み用
</head>
<body>
<title>Flask練習</title>
<h1>Example Sheat</h1>
<div class="cover"></div>
<div class="radius1">
<p>練習用のタブ1</p>
</div>
<div class="radius2">
<p>練習用のタブ2</p>
</div>
</body>
</html>
pyファイルは全く変更していないので、先ほどのファイルのまま実行します。
さあ、どうなるかな・・・
お？何かWebページっぽいレイアウトになったぞ。
デザイン性はともかく、目的は達成したのでここで終わることにします。
まとめ
- 画像を読み込んで表示することができた
- CSSを使うことでデザイン性もカスタマイズ可能
- FlaskよりhtmlやCSSの設定がつらかった(切実に)
気力を使い果たしたので続けるかは未定です。