Skip to main content
HanishSharma
Practitioner ⭐️⭐️⭐️
HanishSharma
Practitioner ⭐️⭐️⭐️
May 14, 2024
Solved

How can I add images, icons in my Streamlit App?

  • May 14, 2024
  • 1 reply
  • 120 views

How do I add images to displayed on the UI in the app?

Also, I would like to use some standard icons that I have for the pages in a multipage app, do we have any examples on how can I do that? I have png and svg files available for the icons.

Best answer by Lars Moastuen

Hi @HanishSharma 

Currently there are no way of embedding images within the app, but there are a few alternative ways of doing this:

  1. Store the resources/images as regular files in the Cognite Data Fusion Files API and load them on demand using https://cognite-sdk-python.readthedocs-hosted.com/en/latest/files.html#retrieve-download-urls.
  2. Embed the images as base64 encoded strings. This approach is only recommended for small images (such as icons). See example below.
import streamlit as st
image_b64 = "data:image/webp;base64,UklGRjIFAABXRUJQVlA4TCUFAAAv4YAMEIAcSXLYpvNPG3uHI6wCyr8ICdS2HW/zpMGUbnXHzrZt+5tt27ZtO7NtZ7btzN6yTmXuCaDTlXOFT5Sd0tDLKiUGALwW9DLOIhr7MqKSIy+DzP3vIqWaSrG/DYvZ4gAehZ7GIKy+CnwZrwN0exlksx7I3JcTzqjG+ThGiQF4NX4a7bCKU+hl3A7gehlRifu62GQUdA7+BpsqptnqsI36y9Th1NACOxyxyUiFNjg1MM9OJ+wwW3NBhYwMwzDSB4kZhhERlGcYRRc1ma6MC9NUYEB338HnoBS/TDPPEfkskTCxGe4bssuKNVj19w3Zf1M4gr4A4BbrIh0AbYPbgD0LL7r6Lmhy7emA1T2O32U+mqYHiR1DU6wWBYf96Krbgd6/gCdA47Ocl0MN3U2zwWHXvPKal9c7D5w2Twv+H+gNAJ5ZZJpTgM0SB+sAwEOLTLZFJABxSibLAcBji4y3ylvAaGqJlGLIAW5ubh4A3Nzc3BoWvDzRzC1OZGPOGuTVbEyYvwAMZSUiVQ1loVVpAP5rzUJEgu0C4C7LoggAMTqwEBG7UeZRDzYNrcYCoBqAsTQsoDD2ABk0NdO5ns/OWm+6AZqrppzyGhvlIcRKOaUvAPOpbx0A7SiyuQxA8cUyALrT7uIOABX/jgx6MSd5bJzDvqLpvYMmaaWwZNSVwCfIPuUoIE7Ihi+A5/wSqQbA2IUH8JZtRGlxgMccx3ApFwUkBazQWwI6qem5TQarIoz2pRblJk17BrhGff4ALKeSQyxgIxFxAOAiIlIOK09DgJkAjDimVG6RxTYzJKP8kRSatXgdNUENITQrsfN+yTXmB2D/hnQAjK2IF7CPiAQDMHuIv7eAf9Kfx26SK3JQPcemkF4286D22ErtZGOhcRGu+aIIjXsGuLrBH4DlFYdYwEYiYgfANUQaArD/OOndspiDvvPNP5TiXDdXA2H0KeObc9LQvGOAWCE98gXwnF+hGgBjiYh4AG/ZiEiAcspx7ZDDAPQ5xFjK0nlnAbW3+BXZP6dNUIWTBoUo0pHSNn/04kcf6gvA7MSZrAOgXWJzGYBii2UA9KRo7JaMogCRhznpr0RTEiusvYUu+NPwxR4DFWOnfeGqGGyLF3C7ksgIkdZIRZ8K8xeA/vyISHefVQlKA/BfaxYiEmwXAHdZFoUAiNGZhYhYLN4ioxFP4hMlbMZLL/lQ+++SuZpKT7M+IhYcevtgj7z0td4A4KHZZrgO8JnISkRkHQB4ZJHJtooEIE5JipYAgKeWmGCVF9iTwLNjeHmyi/DRVHXkk04KqaWTSxn1dTPJhqL0yznztZGHjfYlKdDibxCPdXLTgeaj6TjbIrFjaIrVgjKHPejukMrH1EJswbCvLlhjkGoiaFI2Haz22K0RI4wRTmdq7nkSZ7HEFNkM9a1wWTGqWfXzpfJI+x2y9TQiEbpxueZTIdoXD7ltM1tfDRSUjIYNssUnAHB75GA2VUyz1WHr9BdBTU4NLbDDEZuMVIj6EjHm2u6YXRboLjtlGRmGYQ9CGYZhRATlGUbRSjaGYRpMl0r+AgQIEMBOnyNXYpPrh12pILVM03LK/WTL3TFG2eYRH2DslO5JhbtDHmMxTTzgv+502bIro7EeZtrtniGHEEmnmYZC6baRjT3myt/Px2Tf3XmfdJoyP2l1d6YGv4VOSerqYgPL3UlgPwCRqtEUcWjPZYW6LHT7SuujjWCae9EXEpWMeBnnk1ovo4L4hZvfy5BKrvP5ZQl/unoA"

st.image(image_b64)

 

1 reply

Lars Moastuen
Expert ⭐️⭐️⭐️⭐️
Lars MoastuenAnswer
Expert ⭐️⭐️⭐️⭐️
May 15, 2024

Hi @HanishSharma 

Currently there are no way of embedding images within the app, but there are a few alternative ways of doing this:

  1. Store the resources/images as regular files in the Cognite Data Fusion Files API and load them on demand using https://cognite-sdk-python.readthedocs-hosted.com/en/latest/files.html#retrieve-download-urls.
  2. Embed the images as base64 encoded strings. This approach is only recommended for small images (such as icons). See example below.
import streamlit as st
image_b64 = "data:image/webp;base64,UklGRjIFAABXRUJQVlA4TCUFAAAv4YAMEIAcSXLYpvNPG3uHI6wCyr8ICdS2HW/zpMGUbnXHzrZt+5tt27ZtO7NtZ7btzN6yTmXuCaDTlXOFT5Sd0tDLKiUGALwW9DLOIhr7MqKSIy+DzP3vIqWaSrG/DYvZ4gAehZ7GIKy+CnwZrwN0exlksx7I3JcTzqjG+ThGiQF4NX4a7bCKU+hl3A7gehlRifu62GQUdA7+BpsqptnqsI36y9Th1NACOxyxyUiFNjg1MM9OJ+wwW3NBhYwMwzDSB4kZhhERlGcYRRc1ma6MC9NUYEB338HnoBS/TDPPEfkskTCxGe4bssuKNVj19w3Zf1M4gr4A4BbrIh0AbYPbgD0LL7r6Lmhy7emA1T2O32U+mqYHiR1DU6wWBYf96Krbgd6/gCdA47Ocl0MN3U2zwWHXvPKal9c7D5w2Twv+H+gNAJ5ZZJpTgM0SB+sAwEOLTLZFJABxSibLAcBji4y3ylvAaGqJlGLIAW5ubh4A3Nzc3BoWvDzRzC1OZGPOGuTVbEyYvwAMZSUiVQ1loVVpAP5rzUJEgu0C4C7LoggAMTqwEBG7UeZRDzYNrcYCoBqAsTQsoDD2ABk0NdO5ns/OWm+6AZqrppzyGhvlIcRKOaUvAPOpbx0A7SiyuQxA8cUyALrT7uIOABX/jgx6MSd5bJzDvqLpvYMmaaWwZNSVwCfIPuUoIE7Ihi+A5/wSqQbA2IUH8JZtRGlxgMccx3ApFwUkBazQWwI6qem5TQarIoz2pRblJk17BrhGff4ALKeSQyxgIxFxAOAiIlIOK09DgJkAjDimVG6RxTYzJKP8kRSatXgdNUENITQrsfN+yTXmB2D/hnQAjK2IF7CPiAQDMHuIv7eAf9Kfx26SK3JQPcemkF4286D22ErtZGOhcRGu+aIIjXsGuLrBH4DlFYdYwEYiYgfANUQaArD/OOndspiDvvPNP5TiXDdXA2H0KeObc9LQvGOAWCE98gXwnF+hGgBjiYh4AG/ZiEiAcspx7ZDDAPQ5xFjK0nlnAbW3+BXZP6dNUIWTBoUo0pHSNn/04kcf6gvA7MSZrAOgXWJzGYBii2UA9KRo7JaMogCRhznpr0RTEiusvYUu+NPwxR4DFWOnfeGqGGyLF3C7ksgIkdZIRZ8K8xeA/vyISHefVQlKA/BfaxYiEmwXAHdZFoUAiNGZhYhYLN4ioxFP4hMlbMZLL/lQ+++SuZpKT7M+IhYcevtgj7z0td4A4KHZZrgO8JnISkRkHQB4ZJHJtooEIE5JipYAgKeWmGCVF9iTwLNjeHmyi/DRVHXkk04KqaWTSxn1dTPJhqL0yznztZGHjfYlKdDibxCPdXLTgeaj6TjbIrFjaIrVgjKHPejukMrH1EJswbCvLlhjkGoiaFI2Haz22K0RI4wRTmdq7nkSZ7HEFNkM9a1wWTGqWfXzpfJI+x2y9TQiEbpxueZTIdoXD7ltM1tfDRSUjIYNssUnAHB75GA2VUyz1WHr9BdBTU4NLbDDEZuMVIj6EjHm2u6YXRboLjtlGRmGYQ9CGYZhRATlGUbRSjaGYRpMl0r+AgQIEMBOnyNXYpPrh12pILVM03LK/WTL3TFG2eYRH2DslO5JhbtDHmMxTTzgv+502bIro7EeZtrtniGHEEmnmYZC6baRjT3myt/Px2Tf3XmfdJoyP2l1d6YGv4VOSerqYgPL3UlgPwCRqtEUcWjPZYW6LHT7SuujjWCae9EXEpWMeBnnk1ovo4L4hZvfy5BKrvP5ZQl/unoA"

st.image(image_b64)

 

Lars Moastuen (Software Engineer, Atlas AI)
    Terms & ConditionsAccessibility statement