Python

【StreamlitでWebアプリ作成】<<第10回>>GIFファイルを表示する

StreamlitでGIFファイルを表示する場合、st.image()は2021年2月現在では対応しておらず、st.markdown()を応用することで表示できたので紹介します。

components.html()を使うとHTML/CSSにより、Webアプリのデザインをより凝ったものにすることができます。

ライブラリをインポート

import streamlit as st
import base64
import streamlit.components.v1 as stc

マークダウンを使った方法

URLから読み込む

st.markdown("![Alt Text](https://cafe-mickey.com/coffee-life/wp-content/uploads/2021/02/image.gif)")

ローカルファイルから読み込む

file_ = open("image.gif", "rb")
contents = file_.read()
data_url = base64.b64encode(contents).decode("utf-8")
file_.close()

st.markdown(
    f'<img src="data:image/gif;base64,{data_url}" alt="cat gif">',
    unsafe_allow_html=True,
    )

HTML形式を使った方法

components.html()を使う

stc.html('<img width="200" alt="test" src="https://cafe-mickey.com/coffee-life/wp-content/uploads/2021/02/image.gif">')

以上で解説は終わりです。

ABOUT ME
Mickey@コーヒー好きエンジニア
【製造業×プログラミング×AI】Python/VBAを活用した業務改善、Streamlit/Plotlyを活用したWebアプリ開発について初心者向けに発信中|Wordpressブログを運営しながらHTML/CSSの勉強中|趣味は自家焙煎コーヒー作り|noteでは焙煎理論を発信
【製造×プログラミング×AI】
Mickey@コーヒー好きエンジニア
【製造業×プログラミング×AI】ロボット×画像処理×AI×3現主義が得意な生産技術者|Python/VBAを活用した業務改善、Streamlit/Plotly/PySimpleGUIなどを活用したアプリ開発について初心者向けに発信中|趣味は自家焙煎コーヒー作り|noteでは焙煎理論を発信|ココナラではPython/iOS/VBA開発の支援,就職/転職相談などのサービスもやっています↓ Pythonを使ったWebアプリ開発を支援します 成果物が明確なのでPythonを学びたい人にオススメです
\ Follow me /