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 force HA to refresh the cached images?

1 Like

I get this happening a lot in various places; mostly with my z-wave network diagram or the fact that lovelace keeps asking to remember my login when I login (after saying yes.) No amount of cache flushes, forced-refreshes, etc make any difference.

However, that being said, when I try in a different browser (not Chrome) it seems to work fine. Starting to lose faith in Chrome to be honest; black screens, forced refresh does nothing, etc etc etc. I should try without any addons (never thought of it until now) such as HTTPS Everywhere, Privacy Badger and ABP.

I should have asked before I began my incoherent rambling – are you using Chrome? :slight_smile:

Hi,
you can enforce refreshing the image by “faking” a version parameter to the url. Its a common practice to change the filename from e.g.
/local/mypic.png
to
/local/mypic.png?v=1
and so on… :slight_smile:

3 Likes

Oh cool. Thanks for that. Works a treat.

Yes - but also Safari on my phone. Letsoulfly has the solution below

Doesn’t solve my problem unfortunately.

Same problem here.

My setup is a lovelace picture glance card with an image to my /local/ dir.
When my front door opens, an automation is making a picture of the frontdoor and places that in the /local/ folder, like: camera.frontdoor.jpg

I know I can set up a fake querystring here using the ?.. but this is fixed also.
I want somthing like: ?{{timeticker}}

So everytime you load the page, the file gets newly loaded.
Can this be done?

Regards
Erik

Heyho,

take a look at the config template card
Since you can use any entity(attribute) to change a value in lovelace config, this might be worth a try.

Can anybody elaborate a bit more on this? I too am having an issue with the front end not loading a more recent image.

For my setup, I have a driveway sensor that detects when cars enter my driveway which triggers a snapshot automation, saving the snapshot, sending a notification and shows the image in a picture elements card in Lovelace. Being able to force a refresh of that file is ideal but I’m unsure on how to do it.

So I have found a work around and it actually works pretty slick so I thought I would share it. My automation takes a snapshot and saves it to the www (/local/) directory like so…

- id: '1588381984940'
  trigger: []
  condition: []
  action:
  - data:
      filename: /config/www/snap.jpg
      entity_id: camera.security_cam
    service: camera.snapshot

Next, I added a new camera element to my configuration.yaml file like so…

camera:
  - platform: local_file
    file_path: /config/www/snap.jpg

This camera file_path should match the location of where the automation saved the picture to. What this camera setup does is continually check this file and will update it live as if it was a camera feed. So in the next step when we add it to a picture card in lovelace, as the automation creates the new picture, the camera local_file will automatically update the card with the new pic! So here’s the card setup…

elements: []
camera_image: camera.local_file
type: picture-elements

The important thing here is to ensure you use the camera_image: tag and not the image: one.

Hope this helps someone!

1 Like

Thankyou. I applaud your devious solution. Works like a treat and solves an issue I have had getting an updated snapshot of mail deliveries.