State image in picture elements

Configuration Frontend
1

I want to show a image/gif when it’s raining, i have tried the code underneath en some other options from the documentation. It is a picture elements card in a custom:config-template-card. The best result i had was the image displaying when it was raining but then there was a blue loading circle when it was dry.

Any ideas where to look at?

    - action: none
      entity: sensor.buienradar_condition
      hold_action:
        action: none
      image: local/floorplan/floorplan_rain.gif
      filter: opacity(0%)
      state_filter:
        rainy: opacity(100%)
      style:
        mix-blend-mode: color-dodge
        left: 54%
        top: 33%
        width: 33%
        transform: rotate(90deg) scale(1.0,1.3)
      tap_action:
        action: none
      type: image
2

When i remove state_filter and only use state_image i see the gif when it’s raining but when it’s dry there’s a blue loading circle.

I am now testing in an picture elements card without anything else.

  - action: none
    entity: sensor.buienradar_condition
    hold_action:
      action: none
    state_image:
      rainy: local/floorplan/floorplan_rain.gif
    style:
      mix-blend-mode: color-dodge
      left: 54%
      top: 33%
      width: 33%
      transform: rotate(90deg) scale(1.0,1.3)
    tap_action:
      action: none
    type: image

Edit: now using conditinal and that seems to work.


  - type: conditional
    conditions:
      - entity: sensor.buienradar_condition
        state: rainy
    elements:
      - type: image
        image: local/floorplan/floorplan_rain.gif
        tap_action:
          action: none
        style:
          top: 33%
          left: 54%
          width: 33%
          transform: rotate(90deg) scale(1.0,1.3
          mix-blend-mode: color-dodge