FlaskでBase64形式で画像を埋め込む方法

画像をWebサイトに表示する方法はいくつかありますが、今回はFlaskを使用して、Base64エンコーディングを用いて直接HTMLに画像を埋め込む方法を解説します。この方法は、画像を外部リンクとして扱わず、直接HTMLコード内に含める場合に便利です。

Contents

必要なライブラリ
サンプルコード
HTMLテンプレート
まとめ

必要なライブラリ

このチュートリアルを進めるには、Flaskがインストールされている必要があります。
インストールしていない場合は、以下のコマンドでインストールできます。

pip install Flask

サンプルコード

以下は、FlaskとBase64エンコーディングを使用して画像を埋め込むサンプルコードです。

from flask import Flask, render_template
import base64

app = Flask(__name__)

@app.route('/')
def index():
    with open("image.jpg", "rb") as image_file:
        encoded_image = base64.b64encode(image_file.read()).decode()
    return render_template('index.html', image=encoded_image)

if __name__ == "__main__":
    app.run(debug=True)

HTMLテンプレート

画像を表示するためのHTMLテンプレート（index.html）は以下のようになります。

<!DOCTYPE html>
<html>
<head>
        <title>Base64 Image</title>
</head>
<body>

<img src="data:image/jpeg;base64,{{ image }}">

</body>
</html>

まとめ

この記事では、FlaskとBase64エンコーディングを使用して、HTMLページに直接画像を埋め込む方法を説明しました。この方法は、外部リンクを使わずに画像を表示したい場合に非常に便利です。