Custom:button-card how do I return an image in custom_fields?

Configuration
1

Using custom built-card from here from @RomRider (excellent may I add):-

The example below returns - for custom field - the state (on/off) of a binary_sensor entity and some associated text labelling. It works fine. But how might I return an image in the custom_fields section so that - rather than the ha-icon and text being rendered - an image in my www folder is rendered, for example an image /local/my-image.png ?

Also, where does ha-icon come from , where is it defined, because clearly it is on top of HTML - where can I find this and other tags that can be used?

type: 'custom:button-card'
entity: climate.lounge
show_name: false
show_icon: false
show_label: true
..
..
custom_fields:
  programmer: |
    [[[
        return `<ha-icon
          icon="mdi:power"
          style="width: 24px; height: 24px; color: deepskyblue;"> 
          </ha-icon><span>Programmer: <span style="color: var(--text-color-sensor);">${states['binary_sensor.thermostat_lounge_programme_mode'].state}</span></span>`
    ]]]
1 Like
2

You can use the <img> html object. See here for usage:
https://www.w3schools.com/tags/tag_img.asp

return `<img src='/local/img.jpg'>`

1 Like
3

Ahhh. So just std html then. ok, thanks.

so what about my other qstn, please.? Where can I read more on tags like ha-icon and all other HA html tags and objects and functions ?

4

There’s no documentation for that, that would be directly in the code of the frontend of home assistant available on github.