Picture card

The picture card shows a single image, edge to edge, with rounded corners and nothing else: no title, no name, no state. It is the simplest card there is. Use it to give a dashboard some character, like a photo of a room above its section, or to make a big, visual link to another view.

This page has no live example. The demo home on this site has no pictures or cameras to show.

By default, selecting the picture does nothing. Give it a tap_action to make it a link or a button, like navigate to open the view of a room. Only then does the card get a pointer cursor and become reachable with the keyboard.

When the picture needs to show something about an entity, pick another card:

• The picture entity card shows the name and state of one entity on top of the image.
• The picture glance card adds a row of entity icons at the bottom.
• The picture elements card places icons, labels, and buttons anywhere on the image, like on a floor plan.

Instead of a fixed image, the card can take its picture from an entity with image_entity. That works for an image entity, which a lot of integrations provide, and for a person, whose profile picture the card shows. The picture follows the entity: when the image entity gets a new image, the card shows it. With an image entity, selecting the card opens its more-info dialog, unless you set another tap_action.

• Always set alt_text when the picture means something, or acts as a link. A screen reader has nothing else to go on. With an image_entity, the name of the entity is the fallback.
• Pick images that work in both the light and the dark theme. The card shows the image as it is.
• The picture takes the full width of its section, and its height follows from the image. A very tall image pushes everything below it down, so crop it before you use it.

• image (string or media): the image to show, as a URL or a media source item. Required, unless you set image_entity.
• image_entity (string): an image or person entity to take the picture from.
• alt_text (string): the alternative text of the image. Defaults to the name of the image_entity, if there is one.
• theme (string): a theme to apply to the card.
• tap_action (action): what happens when you select the card. Defaults to more-info with an image_entity, and to none without one.
• hold_action, double_tap_action (action): what happens on hold or double tap. Default to none.

type: picture
image: "/local/living_room.jpg"
alt_text: "Living room"
tap_action:
  action: navigate
  navigation_path: "/lovelace/living-room"

The card lives in src/panels/lovelace/cards/hui-picture-card.ts, and the element is <hui-picture-card>. It is a plain <img> inside an <ha-card>, with overflow: hidden for the rounded corners. Unlike the other picture cards, it does not use <hui-image>, so it has no state images, filters, or aspect ratio.

The card has no grid options of its own. In the sections view, it takes all 12 columns, and its height follows the image.

Source