Can't display latest camera event image - getting 404 errors

[analog saffron]

I've been struggling for hours to create a card that shows the most recent event image from my cameras. Despite multiple approaches, I keep getting 404 errors.

What I'm Trying to Do

• Display the newest image from multiple event cameras (all with _event_image suffix)
• Use the authenticated URL that works when accessed directly
• Automatically update when new images arrive

What I've Tried

type: picture
image: >-
  {% set newest = (states.image | selectattr('entity_id', 'match', '.*_event_image$') | sort(attribute='last_updated') | last) %}
  http://LOCALIP:8123{{ state_attr(newest.entity_id, 'entity_picture') }}
tap_action:
  action: none

The Problem

• The template generates URLs like: http://LOCALIP:8123/api/image_proxy/image.turklingel_event_image?token=abc123
• These URLs work when pasted directly in browser, but return 404 in the card
• The same happens with picture-entity cards

Additional Info

• Manual tests confirm the entities exist and have valid entity_picture attributes:
  {{ state_attr('image.turklingel_event_image', 'entity_picture') }}
  → /api/image_proxy/image.turklingel_event_image?token=abc123
• Camera entities are properly formatted:
  {{ states.image | selectattr('entity_id', 'match', '.*_event_image$') | map(attribute='entity_id') | list }}
  → ['image.turklingel_event_image', 'image.zaun_event_image', ...]

Questions

1. Why would the same URL work in browser but not in the card?
2. Is there a better way to display authenticated camera images?
3. Could this be related to token expiration during rendering?

Any help would be greatly appreciated! I'm happy to provide more details about my setup.

[lime bay]

You don't have that image as picture entity in HA? Usually camera integrations offer that

I bet your browser has some cookies stored, if you have authenticated there, but when the image is routed through the HA, then some data is not transferred. Might be even some browsers which limit it, idk.

But anyway, I'm using frigate myself and it publishes the last detected images directly as entity in HA, which I just added to my dashboard. Never even thought that it is complicate somehow.

camera_view: auto
type: picture-glance
entities: []
image_entity: image.reolink_car
grid_options:
  columns: 6
  rows: auto

[lime bay]

As alternative, you can consider of adding all of those image entities as a card and hide the older ones based on some rules..

[analog saffron]

I have but when i check the source of it it also shows that authenticated stuff. It's not cookie or cache related I am sure. Well I also was thinking this is a simple task but it not turns out like it.

[analog saffron]

I guess that is the best solution for me now. Just have to figure how to add that conditions based on last_update state.

This works so far in the template editor

  {% set event_images = states.image | selectattr('entity_id', 'match', '.*_event_image$') | list %}
  Found {{ event_images | length }} event images:
  
  {% for img in event_images %}
    - {{ img.entity_id }} ({{ img.last_updated }})
  {% endfor %}
  Newest: 
  {% if event_images | length > 0 %}
    {{ (event_images | sort(attribute='last_updated', reverse=true) | first).entity_id }}
  {% else %}
    No images!
  {% endif %}

It returns

Found 8 event images:
  
  
    - image.zaun_event_image (2025-04-15 07:59:27.802627+00:00)
  
    - image.garten_event_image (2025-04-15 07:59:27.802839+00:00)
  
    - image.garten_hintertur_event_image (2025-04-15 07:59:27.802928+00:00)
  
    - image.eingang_event_image (2025-04-15 07:59:27.803013+00:00)
  
    - image.hintertur_event_image (2025-04-15 07:59:27.803113+00:00)
  
    - image.vordertur_event_image (2025-04-15 07:59:27.803195+00:00)
  
    - image.smartdrop_event_image (2025-04-15 07:59:27.803342+00:00)
  
    - image.turklingel_event_image (2025-04-15 07:59:27.803415+00:00)
  
  Newest: 
  
    image.turklingel_event_image

So I was hoping i can use it somehow in the picture card but sadly not.

This seems to work with card mod

type: picture
image_entity: image.turklingel_event_image
tap_action:
  action: none
card_mod:
  style: |
    :host {
      {% set latest = (states.image 
        | selectattr('entity_id', 'match', '.*_event_image$') 
        | sort(attribute='last_updated', reverse=true) 
        | first).entity_id 
      %}
      {% if latest != 'image.turklingel_event_image' %}
        display: none !important;
      {% endif %}
    }