GIF#

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

import panel as pn

pn.extension()

The GIF pane embeds a .gif image file 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. Animated GIFs play automatically.

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 GIF 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_gif_ method.
target (str, default=’_blank’): Where to open the document linked in link_url, e.g. '_blank' or '_self'.

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

gif_pane = pn.pane.GIF('https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif')

gif_pane

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

gif_pane.clone(width=100)

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

pn.pane.GIF('https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif', sizing_mode='stretch_width', height=200)

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.

The caption parameter adds a caption below the image, alt_text provides a text alternative for screen readers and failed loads, and link_url makes the image a clickable link, opened in a new tab by default (see target):

pn.pane.GIF(
    'https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif',
    width=300,
    caption='An animated loading icon',
    alt_text='An animated loading icon',
    link_url='https://panel.holoviz.org',
)

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