Python

【StreamlitでWebアプリ作成】<<第5回>>複数の画像を表示する

本記事ではStreamlitで複数の画像を表示するをテーマにした内容です。画像を横に整列したり、for文を使ってフォルダ内にある全ての画像を表示したい時などのケースを想定した内容となっています。

これまでの内容

Streamlitのインストールからタイトルの設置、グラフや表を表示する、選択肢のコンボボックスを設置するなどは以前までの記事を先に読んでください。

【StreamlitでWebアプリ作成】<<第4回>>選択肢とグラフを連携する 今回の内容は第3回の続きです。 https://cafe-mickey.com/python/streamlit-3/ セレクト...

必要なライブラリをインポートする

まずはstreamlitをstとして読み込みます。

そして画像を扱うのにPIL(Python Image Library)を使用します。

これは画像ファイルの読み込み・操作・保存を行う機能を提供するフリーのライブラリです。

import streamlit as st
from PIL import Image

一枚の画像を表示する

それでは早速画像を読み込んでみましょう。

Image.open(ファイルのパス)で画像の読み込みができます。

streamlitでの表示ではst.image(対象画像、オプション)で行います。

caption=’キャプション名’

use_column_width=True or Faulse

などのオプションが使えます。

image = Image.open('test.png')

st.image(image, caption='サンプル',use_column_width=True)

image.pyというファイルで保存し、

ターミナル上でコマンドを入力して実行します。

streamlit run image.py

複数画像を横に並べて表示する

ここでは複数画像を横に整列して表示する方法について説明します。

st.beta_columns(列数)で整列表示が行えます。

チュートリアルの解説と同様なやり方で2列表示する方法を解説します。

col1, col2, col3 = st.beta_columns(3)

with col1:
    st.header("A cat")
    st.image("https://static.streamlit.io/examples/cat.jpg", use_column_width=True)

with col2:
    st.header("A dog")
    st.image("https://static.streamlit.io/examples/dog.jpg", use_column_width=True)
    
with col3:
    st.header("An owl")
    st.image("https://static.streamlit.io/examples/owl.jpg", use_column_width=True)

for文を使って複数画像を連続で並べる場合

withをfor文の中に入れることによって、少ない行数のコードで横方向に好きな枚数分の画像を並べることができます。

例ではnum=3(3枚)の画像を並べる例です。

読み込む画像の名前は1.png、2.png、3.pngというファイルを用意しておく必要があります。

num=3
lcol=[]
col= st.beta_columns(num)

for i in list(range(0,num,1)):
    with col[i]:
        st.header("図"+str(i+1))
        st.image(str(i+1)+".png", use_column_width=True)

チュートリアルのやり方では枚数が増えるにつれてコードが長くなりますが、for文を使うと行数は変わらず同じことができます。

ファイルアップローダーを使用するとアプリ応用の幅が広がり、さらに便利になります。

【StreamlitでWebアプリ作成】<<第6回>>ファイルアップローダーを使う 今回はStreamlitでWebアプリを作成する例として、file_uploaderの使い方を紹介します。 ファイルアップローダーは画...

【おまけ】grob.globを使用し、エラーを無視して連続で表示する

files1 = glob.glob('対象フォルダパス/*.tif')
for file in files:
    try:
        path=file
        image=Image.open(path)
        st.image(image, width=100)
    except OSError as e:
        print('エラー発生')
ABOUT ME
Mickey@コーヒー好きエンジニア
【製造業×プログラミング×AI】Python/VBAを活用した業務改善、Streamlit/Plotlyを活用したWebアプリ開発について初心者向けに発信中|趣味は自家焙煎コーヒー作り|noteでは焙煎理論を発信|ココナラではプログラミングに関する相談,就職/転職やコーヒーに関する相談などのサービスをやっています
【製造×プログラミング×AI】
Mickey@コーヒー好きエンジニア
【製造業×プログラミング×AI】ロボット×画像処理×AI×3現主義が得意な生産技術者|Python/VBAを活用した業務改善、Streamlit/Plotly/PySimpleGUIなどを活用したアプリ開発について初心者向けに発信中|趣味は自家焙煎コーヒー作り|noteでは焙煎理論を発信|ココナラではPython/iOS/VBA開発の支援,就職/転職相談などのサービスもやっています↓ Pythonを使ったWebアプリ開発を支援します 成果物が明確なのでPythonを学びたい人にオススメです
\ Follow me /