Finding it hard to refresh an image that was overwritten in HA

[DP0427]

Thanks to the help of @zoogara in this thread I was able to get started with my Blink Cameras in HA with scripts to trigger taking snapshots and writing them to a specific file name in the /local/ folder of HA.
From there I was able to use the Picture Glance card to display that picture, and created an action to trigger the script to take a new snapshot. This should in turn overwrite the old image with the same file name, and refresh the image being displayed on the card.

Here’s the YAML for that card:

type: picture-glance
title: Blink Backyard
image: /local/blink/pics/backyard_pic.jpg
entities:
  - entity: binary_sensor.backyard_motion
    tap_action: none
    hold_action: none
camera_view: auto
tap_action:
  action: call-service
  service: script.turn_on
  service_data:
    entity_id: script.blink_backyard_snapshot
hold_action:
  action: none

When I go to view that picture in Chrome, despite a full reload, I sometimes can’t reliable show the new picture and the old one is still stored. I’m able to get it to load if I clear out my cookies and cached files, or delete the image and then run the script to take the snapshot. I’m just wondering if there’s a better way to go about this as it feels quite clunky.
Depending on if I am using a certain browser or the HA companion app, the results can be hit or miss.

Would love any advice or suggestions here.

[zoogara (Daryl)]

I haven’t really had time to research this - but there are a few threads where people have had a look at that issue. Try this one:

Refresh Cached images in Lovelace Picture-Elements (maybe other places too)

Looked for similar issue but can’t see them. I’m playing with my floorplan using a Picture-Elements card. When I replace an image on the Pi, the new image is not picked up. I’ve tried restart Home-Assistant, rebooting, refreshing the browser cache (ctl-f5). But old the image is still used. The only solution I’ve found is to use a new name for the image - however as there’s a fair amount of trial and error that gets old fast - especially when many entities share the same image. How does one…

There are other threads too - try google search for “home assistant refresh updated image”.

[WallyR (Wally)]

Your issue is really not with HA, but with the browsers.
It is the browsers cache algorithm that is the issue, so the obvious best solution would be to disable the browser cache, but to some that can have other issues, especially on slower internet connections.

An alternative is to make the image path unique each time, but only works if the path is used directly in the HTML pages, which are often the case, though.
?key=value is a way of transfer values to a HTML page, but here it is used to make the URL unique and therefore make the browser think it is another element than the previous one.
Key can be anything and value is usually a timestamp.

Beware here that if the image change a lot, then you might end up with a lot of cached files in your browser.
The lifetime of cached files might need to be adjusted a bit then.
Some browsers have it set to years and other to months.

[Airwolf79 (Airwolf)]

I had the same problem and tried to make a feature out of this problem

I store each blink image with the timestamp of its recording in the filename and use a text helper to store the latest filename created this way.

In the Image card i do not provide a fixed image name then but use that one stored in the helper. So its a new picture everytime and therefore no problems with caching.

Benefit of this approach is, that i always have a history of images if i want to look up something that happened in the past. As i only make a snapshot whenever there is motion detected, the images are always at least a little bit helpfull

Of course an automation deletes images older than x days …

[DP0427]

Thanks everyone for your contributions and suggestions! I was interested in what Airwolf mentioned, so I got Google Gemini to teach me how to format the image name to include a time stamp and then to teach me how to use a text helper to reference it.
I then changed things to the Picture Entity card to display the image and to run the modified script when double tapped with a prompt just in case.

Here’s the resulting picture-entity YAML:

type: picture-entity
entity: camera.backyard # Or any other entity
image: '[[ states("input_text.helper_blink_backyard_latest_image") ]]'
name: Blink Backyard Snapshot
double_tap_action:
  action: call-service
  service: script.blink_backyard_snapshot
  data: {}
  confirmation:
    text: Taking snapshot...
tap_action:
  action: none # Prevent single taps from doing anything
hold_action:
  action: popup