Image does not show

Configuration Frontend
1

I have following syntax in my card:

type: picture-elements
image: /local/slideshow/fallback.jpg
elements:
  - type: image
    entity: input_text.random_foto
    image: /local/{{ states('input_text.random_foto') }}
    style:
      top: 50%
      left: 50%
      width: 100%

input_text.random_foto has this value for example : slideshow/foto144.jpg
When I use in my browser http://localip:8123/local/slideshow/foto144.jpg an image is shown.
Can anyone tell me why it does not show in my card ? I tried various cards but it does not show

2

I suspect that the picture elements card doesn’t support Jinja templates. The documentation does not mention that you can use templates, which usually means you can’t.

3

Correct, templates cannot be used.
Wrapping the element into config-template-card could be a way.

4

I asked chatgpt to help me with this (I don’t know what a config-template-card is) and gave me this working solution:

type: custom:button-card
entity: input_text.random_foto
show_name: false
show_state: false
show_icon: false
styles:
  card:
    - height: 400px
    - background-image: >
        [[[ return `url('/local/${states['input_text.random_foto'].state}')`;
        ]]]
    - background-size: cover
    - background-position: center