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

Configuration Frontend
1

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?

3 Likes
2

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:

3

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:

17 Likes
4

Oh cool. Thanks for that. Works a treat.

5

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

6

Doesn’t solve my problem unfortunately.

7

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

1 Like
8

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.

9

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.

10

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!

29 Likes
11

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

12

@exeljb Works like a charm ! Great solution using this local_file setup as camera.

tnx
John

13

@exeljb - Thanks for outsmarting the system!

14

In case any other newbies are looking to do this but want it to work with multiple cameras, this is what I did to support that:

For the camera element in configuration.yaml add a name: variable, e.g.:

camera:
  - platform: local_file
    name: camSnap1frontdoor
    file_path: /config/www/cam_captures/frontdoor.jpg

Then in your dashboard YAML use the value of that name: variable for your camera_image: entry. So in the above example the name is camSnap1frontdoor and that makes the corresponding entity camera.camsnap1frontdoor. So my dashboard card YAML ended up as:

elements: []
type: picture-elements
camera_image: camera.camsnap1frontdoor
title: Most recent still image capture

All that is probably obvious to everyone on this thread, but I’m new to this so it took me some head scratching and searching – maybe that’ll help another beginner some day.

4 Likes
15

Hello.
Just to say many thanks for the tip. I have an outdoor Blink cam and I made a dashboard card where the picture is uploaded. But I found an issue. The picture showed is not the last one, but the last but one.
I checked the file in save folder, and it is not the last taken picture whereas on the blink app, the last picture is OK

16

This works perfect for traffic cameras and webcam images I pull from our local ski resorts.
dimagoltsman/refreshable-picture-card: a refreshable picture card for HACS (github.com)

17

yeah I know this is old. But I got directed here by a google search and wanted to share a slightly different solution - different use case mind you - but it might work otherwise.

In my case I use card_mod to set a background image from a url with a unix timestamp that refreshes on its own. image automatically updates itself in the background. the beauty of this is you don’t need a camera entity, and you can apply this to virtually any other card.

card_mod:
  style: |
    ha-card {
      background: url("/local/homepics/refresh/cam2_image.jpg?v={{now().timestamp()|int }}");
      background-size: cover;
      background-repeat: no-repeat;
    }
4 Likes
18

How exactly would this work because the picture is always above the background or am I missing something here?

  - type: picture
    image: /local/cam/brievenbus.jpg
    tap_action:
      action: url
      url_path: http://'*************/l/local/cam/brievenbus.jpg
    hold_action:
      action: url
      url_path: app://
    card_mod:
      style: |
        ha-card {
         background: url('*************/local/cam/brievenbus.jpg?v={{now().timestamp()|int }}');
         background-size: cover;
         background-repeat: no-repeat;
        }
19

You can use a transparent png so that your background picture becomes visible

2 Likes
20

Works like a charm! Thnks