Skip to main content


Use an image card to display a base64-encoded image.

from h2o_wave import site, uiimport ioimport base64import numpy as npimport matplotlib.pyplot as plt
n = 25plt.figure(figsize=(3, 3))plt.scatter(    np.random.rand(n), np.random.rand(n),    s=(30 * np.random.rand(n)) ** 2,    c=np.random.rand(n),    alpha=0.5,)
buf = io.BytesIO()plt.savefig(buf, format='png') = base64.b64encode('utf-8')
page = site['/demo']page['example1'] = ui.image_card(    box='1 1 3 5',    title='An image',    type='png',    image=image,)
# Another way to achieve the same result is to use a data URL for the path:# The example below constructs the data URL from the base64-encoded#   used in the previous['example2'] = ui.image_card(    box='1 6 3 5',    title='An image',    path=f"data:image/png;base64,{image}",)

Tags: โ€‚image