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

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

これまでの内容

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

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

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

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

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

import streamlit as st
from PIL import Image

一枚の画像を表示する

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

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

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

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

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文を使うと行数は変わらず同じことができます。

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

【おまけ】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('エラー発生')