View a local image (png/jpeg)

Is there a simple way to view local images (e.g., JPEG/PNG) in a reactive cell? I found https://docs.marimo.io/guides/integrating_with_marimo/displaying_objects.html, but this seems for remote urls? I guess I could base64 encode the images and create data urls. Just curious if I missed something in the docs.

22 comments

View a local image (png/jpeg)

Plain Text

import base64

class MyImage:
    def __init__(self, fp: pathlib.Path) -> None:
        self._url = f"data:image/jpeg;base64,{base64.encodebytes(fp.read_bytes()).decode("utf-8")}"

    def _mime_(self) -> tuple[str, str]:
        return ("image/jpeg", self._url)

MyImage(picker.value)

seems to work!

Any way to constrain the width?

@manzt , you should be able to use mo.image() that supports local paths, remote urls, and bytes

for width. can you might be able to do mo.img().style({"width": 300})

heck ya, I also go there with mo.Html... but this is cleaner 🙂

Traceback (most recent call last):
File "/Users/manzt/.cache/uv/archive-v0/DCgM2WuQ6B8IEZg0HzEjf/lib/python3.12/site-packages/marimo/_runtime/executor.py", line 171, in execute_cell
return eval(cell.last_expr, glbls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^
Cell marimo://demo.py#cell=cell-5
, line 1, in <module>
mo.img(fp)
^^^^^^
AttributeError: module 'marimo' has no attribute 'img'

hmm, maybe a different namespace?

ahh mo.image()

Oh oops sorry for the typo

is it possible to diplay the image within an md cell/an mo.md block?

in Jupyther notebooks I display an image within Markdown with name but that doesn't seem to work.

SShahmir

Plain Text

img = mo.image("https://marimo.io/logo.png", width=150, rounded=True)

mo.md(f"Some image: {img}")

this should work for you. mo.image returns Html, you can interpolate Html in mo.md

Thanks @Shahmir unfortunately using f""" dislikes something in my markdown syntax and thus throws all kinds of errors.
Not sure why ![image Name]( ./image.png) doesn't work

SShahmir

interesting, that syntax works for me but with external urls 🧐

btw, what errors? maybe can open up a new issue on discord / github for this

@Zolto for the syntax you are trying to use for markdown, you will need to put them under the folder public, next to your notebook file.

E.g. ./public/logo.png

The reason for this is both for security and ease-of-productionizing

@Myles Scolnick thanks for your answer,
is there an appropriate documentation you could point me to?

playing around with your advice I found the following
I my directory structure looks like this:

c:\data\programming\python\App\public\image.png
c:\data\programming\python\App\App.marimo.py
c:\data\programming\python\AnotherApp\public\anotherImage.png
c:\data\programming\python\AnotherApp\AnotherApp.marimo.py

in App.marimo.py there's a markdown cell with this line amongst others:
myPicture

Method1.) If I start the notebook server from the dirctory where the app resides, the image is displayed in the rendered cell
cd c:\data\programming\python\App
marimo.exe edit

But if I start it from the parent directory (because I want o access multiple notebooks)
cd c:\data\programming\python
marimo.exe

A sign is displayed indicating a broken Image whether I use the path relative to the notebook myPicture

UPDATE: Works using path relative to workbook after restarting marimo.exe
myPicture
cd c:\data\programming\python
marimo.exe

Thanks a lot!