Picture Card Elements - Lovelace UI

1

Really basic question. I’m trying to create a picture-element-card in the lovelace UI and the definition identifies the path the image in the example as /local/image.svg. My question is what does this path translate to on a hass.io installation? Is it the /config directory or somewhere else? Thanks in advance. I can’t find any guidance in the documentation and I suspect that it’s going to be really straight forward but can’t work it out.

My current config is

  • icon: mdi:floor-plan
    cards:
    • type: picture-elements
      image: /local/Downstairs.svg
      title: Downstairs Floor Plan
      show_header_toggle: false
      panel: true

which gives me the error message ‘invalid card configuration’

2

Could you format your code using the </> button in the editor please? It makes it easier to see whether there are obvious syntax/indentation issues
image

/local/xxx would normally refer to config/www/xxx
You may have to create the www folder if it does not yet exist…

3

Read here:

4 
    cards:
  - type: picture-elements
    image: /local/Downstairs.svg
    title: Downstairs Floor Plan
    show_header_toggle: false
    panel: true

Thanks both, so the referred image file is located in /config/www/Downstairs.svg. Still get the same error message.

5

Did you reboot HA after creating the www folder?
You may also need to clear your cache for the change to take effect…
also watch your indentations, this is critical in YAML:

    cards:
    - type: picture-elements
      image: /local/Downstairs.svg
      title: Downstairs Floor Plan
      show_header_toggle: false
      panel: true
6

Ok, I seem to have solved it. Yes the www folder already existed, but it turn out, by changing the card type to picture and not picture-elements it has now been recognised. I had thought I would be able to present a picture-elements card without the elements declared, but it seems not.

I did it this way as I was trying to build up the config as I go along, will be more careful in the future. Thanks.

1 Like