こんにちは、JS2IIUです。
画像を表示するのはWEBのUI要素としてなくてはならないものですね。今回は画像データをStreamlit上に表示させる方法について見ていきます。よろしくお願いします。
はじめに
今回は、Python製の簡単Webアプリ作成ツール「Streamlit」を使って、画像データを表示する方法について解説します。
Streamlitには、画像を表示するための便利な関数として st.image が用意されています。
ローカルの画像ファイルはもちろん、インターネット上の画像URLからも表示でき、サイズ調整やキャプション追加などのオプションも簡単に設定できます。
これから、基本的な使い方から応用的な方法まで順番に説明していきます！
1. st.imageの基本的な使い方
まずは、ローカルに保存された画像ファイルを表示する最もシンプルな方法から見ていきましょう。
1-1. ローカル画像を表示する手順
- 表示したい画像ファイル（例：
sample.jpg）を、Pythonファイルと同じフォルダに置きます。 - Streamlitで画像を読み込んで表示します。
1-2. サンプルコード
import streamlit as st
# 画像ファイルを表示
st.image("sample.jpg")このコードを実行すると、指定した画像がそのままアプリ上に表示されます！
1-3. 注意点
- ファイルパスが正しいかを確認してください。
- ファイル名に日本語や特殊文字が含まれる場合、読み込めないことがあるので注意しましょう。
2. URLから画像を表示する
次に、インターネット上にある画像URLを指定して表示する方法を紹介します。
2-1. URL画像を表示する手順
- 表示したい画像の直接リンク（画像ファイルそのもののURL）を用意します。
- そのURLを
st.imageに渡します。
2-2. サンプルコード
import streamlit as st
# インターネット上の画像URL
image_url = "https://example.com/sample.jpg"
# URLから画像を表示
st.image(image_url)これだけで、Web上の画像も簡単に表示できます！
試しにPlaceholder.coの画像を表示させてみます。
Placehold | A simple, fast and free image placeholder service
import streamlit as st
# インターネット上の画像URL
image_url = "https://placehold.co/600x400?text=Hello+World+JS2IIU"
# URLから画像を表示
st.image(image_url)
2-3. 注意点
- URLが直接「画像ファイル」を指している必要があります。
- インターネット接続が必要です。
- 画像の著作権や利用規約には十分注意しましょう。
3. 表示オプションを使いこなす
st.imageは、ただ表示するだけでなく、サイズ調整やキャプション表示も簡単にできます。
ここでは代表的なオプションを紹介します！
3-1. widthオプションでサイズ調整
画像の幅（px単位）を指定できます。
サンプルコード
import streamlit as st
st.image("sample.jpg", width=300)この例では、画像の幅が300ピクセルにリサイズされて表示されます。
3-2. captionオプションで説明文を追加
画像の下にキャプション（説明文）を表示できます。
サンプルコード
import streamlit as st
st.image("sample.jpg", caption="これはサンプル画像です。")キャプションを追加すると、見る人に画像の内容を説明できて親切ですね！
4. さらに便利な使い方
Streamlitのst.imageは、さらに柔軟な使い方もできます。
4-1. 複数画像をまとめて表示する
複数の画像をリスト形式で渡すと、一度に複数枚表示することができます！
サンプルコード
import streamlit as st
# 複数の画像をリストで指定
images = ["sample1.jpg", "sample2.jpg", "sample3.jpg"]
st.image(images, caption=["画像1", "画像2", "画像3"], width=200)ポイント
- キャプションもリストで渡すと、各画像に対応して表示されます。
widthも同時に指定可能です。
4-2. use_column_width=Trueで自動サイズ調整
画像をアプリのカラム幅に合わせて自動調整したい場合は、use_column_width=Trueを使います。
サンプルコード
import streamlit as st
st.image("sample.jpg", use_column_width=True)このオプションを使うと、画像が画面幅にぴったりフィットするので、デザインがきれいに整います！
まとめ
今回は、Streamlitで画像を表示するためのst.imageの使い方を紹介しました。
✅ ローカル画像もURL画像も簡単に表示できる
✅ サイズやキャプションも自由に設定できる
✅ 複数画像をまとめて表示することも可能
Streamlitを使うと、Pythonコードだけで直感的にWebアプリを作れるので、ぜひいろいろ試してみてください！
次回は、ファイルアップロード機能と組み合わせて、アップロードした画像をその場で表示する方法も紹介したいと思います！
参考リンク
最後に書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。Poetryについても詳しく説明されています。ぜひ手に取ってみてください。
最後まで読んでいただきありがとうございます。
コメント