Image#

Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).

import panel as pn

pn.extension()

The Image pane embeds any supported image format in a panel if provided a local path, raw bytes or a file-like object, or will link to a remote image if provided a URL.

The Image pane acts as a dispatcher: it selects whichever of the more specific image panes (PNG, JPG, GIF, SVG, WebP, AVIF or ICO) recognizes the image format and uses it to render the image. Consult the reference for each specific pane for the options it supports.

Parameters:#

For details on other options for customizing the component see the layout and styling how-to guides.

alt_text (str, default=None): Alt text to add to the image tag. The alt text is shown when a user cannot load or display the image.
caption (str, default=None): Optional caption displayed below the image.
embed (boolean, default=False): If given a URL to an image this determines whether the image will be embedded as base64 or merely linked to.
fixed_aspect (boolean, default=True): Whether the aspect ratio of the image should be forced to be equal.
link_url (str, default=None): A link URL to make the image clickable and link to some other website.
object (str or object): The image file to display. Can be a string or pathlib.Path pointing to a local or remote file, raw bytes, a file-like object, or an object with a _repr_png_, _repr_jpeg_, _repr_svg_ (etc.) method.
target (str, default=’_blank’): Where to open the document linked in link_url, e.g. '_blank' or '_self'.

The Image pane can be pointed at any local or remote image file. If given a URL starting with http or https, the embed parameter determines whether the image will be embedded or linked to:

jpg_pane = pn.pane.Image('https://assets.holoviz.org/panel/samples/jpeg_sample.jpeg')
png_pane = pn.pane.Image('https://assets.holoviz.org/panel/samples/png_sample.png')
webp_pane = pn.pane.Image('https://assets.holoviz.org/panel/samples/webp_sample.webp')

pn.Column(jpg_pane, png_pane, webp_pane)

To check which specific pane will be used to render an object, call the get_pane_type classmethod:

pn.pane.Image.get_pane_type('https://assets.holoviz.org/panel/samples/webp_sample.webp')

We can scale the size of the image by setting a specific fixed width or height:

png_pane.clone(width=400)

Alternatively we can scale the width and height using the sizing_mode:

pn.pane.Image(
    'https://assets.holoviz.org/panel/samples/png_sample2.png', sizing_mode='scale_width'
)

You can add a caption to the image using the caption parameter:

pn.pane.Image(
    'https://assets.holoviz.org/panel/samples/png_sample2.png', sizing_mode='scale_width', caption='World Map'
)

Note that by default the aspect ratio of the image is fixed, and so there may be a gap beside or below the image even in responsive sizing modes. To override this behavior set fixed_aspect=False or provide fixed width and height values.

PIL#

The Image pane will render any object that defines a _repr_png_, _repr_jpeg_ or _repr_svg_ method, including PIL images:

from PIL import Image, ImageDraw

im = Image.new(mode='RGB', size=(256, 256))

draw = ImageDraw.Draw(im)
draw.line((0, 0) + im.size, fill=128, width=5)
draw.line((0, im.size[1], im.size[0], 0), fill=128, width=5)
draw.rectangle([(96, 96), (160, 160)], fill=(0, 0, 128), width=10)

pn.pane.Image(im)

Raw image bytes are also supported. Here we save the PIL image above as PNG into an in-memory buffer and pass the resulting bytes to the pane:

from io import BytesIO

buffer = BytesIO()
im.save(buffer, format='PNG')

pn.pane.Image(buffer.getvalue())

Open this notebook in Jupyterlite | Download this notebook from GitHub (right-click to download).