Image

Displays an image from a URL, Path, numpy data, bytes or PIL image.

@solara.component
def Image(
    image: Union[str, Path, "np.ndarray", bytes, "PIL.Image.Image"],
    width: Optional[str] = None,
    format="png",
    classes: List[str] = [],
):

    ...

If passed as bytes, the image is assumed to be in the format specified by the format argument.

Examples

Displaying an image from a Path

import solara
import solara.website
from pathlib import Path


image_path = Path(solara.website.__file__).parent / "public/beach.jpeg"

@solara.component
def Page():
    solara.Image(image_path)

Live output

Displaying an image from a URL

import solara


image_url = "/static/public/beach.jpeg"

@solara.component
def Page():
    solara.Image(image_url)
    display(image_url)

Live output

Displaying an image from a numpy array

import solara
import solara.website
from pathlib import Path
import numpy as np
import PIL.Image


image_path = Path(solara.website.__file__).parent / "public/beach.jpeg"
image_ndarray = np.asarray(PIL.Image.open(image_path))

@solara.component
def Page():
    solara.Image(image_ndarray)
    display(image_ndarray)

array([[[  1, 113, 199],
        [  1, 113, 199],
        [  1, 113, 199],
        ...,
        [  0, 110, 199],
        [  0, 110, 199],
        [  0, 110, 199]],

       [[  1, 113, 199],
        [  1, 113, 199],
        [  1, 113, 199],
        ...,
        [  0, 110, 199],
        [  0, 110, 199],
        [  0, 110, 199]],

       [[  1, 113, 199],
        [  1, 113, 199],
        [  1, 113, 199],
        ...,
        [  0, 110, 199],
        [  0, 110, 199],
        [  0, 110, 199]],

       ...,

       [[237, 201, 189],
        [241, 205, 193],
        [240, 204, 190],
        ...,
        [130, 153, 194],
        [131, 154, 195],
        [131, 154, 195]],

       [[234, 198, 186],
        [239, 203, 191],
        [238, 202, 188],
        ...,
        [130, 153, 194],
        [131, 154, 195],
        [131, 154, 195]],

       [[240, 206, 196],
        [237, 203, 191],
        [232, 196, 182],
        ...,
        [130, 153, 194],
        [130, 153, 194],
        [130, 153, 194]]], dtype=uint8)

Live output

Displaying an image from bytes

import solara
import solara.website
from pathlib import Path
import PIL.Image


image_path = Path(solara.website.__file__).parent / "public/beach.jpeg"
image_bytes = image_path.read_bytes()

@solara.component
def Page():
    solara.Image(image_bytes, format="jpeg")
    display(image_bytes[:100])

Live output

Displaying an image from a PIL Image

import solara
import solara.website
from pathlib import Path
import PIL.Image


image_path = Path(solara.website.__file__).parent / "public/beach.jpeg"
image = PIL.Image.open(image_path)

@solara.component
def Page():
    solara.Image(image)

Live output

Arguments

image: URL, Path, numpy data, bytes or PIL Image.
width: Width of the image, by default (None) the image is displayed at its original size. Other options are: "100%" (to full its parent size), "100px" (to display it at 100 pixels wide), or any other CSS width value.
format: Format of the image, only used when image is of type bytes, or a PIL Image is passed.
classes: List of CSS classes to add to the image.