Using images in dashboards. Images not showing up. | Home Assistant | Page 1

winter kiln Aug 10, 2025, 4:24 AM

#

I am generating AI images of weather conditions in my area and getting these images to show up right away when dumping them in a folder structure has been challenging. I gave up on trying to use something in the media folder or a custom media folder as theres some sort security thing that makes that difficult.

Trying to use them as a background in custom button card but I'm testing with a regular picture card.

I have been dumping images into www using smb and referencing /local/weather/020200P.png but even after restarting HA (running on HAOS) these images do not show up.... until much later. Images are fairly generic weather conditions so they get reused and so I eventually see them but never as soon as they are uploaded.

gilded pelican Aug 10, 2025, 5:35 AM

#

I am a bit puzzled. What do you mean with „but never as soon as they are uploaded“? Are you generating those images on the fly?

winter kiln Aug 10, 2025, 3:01 PM

#

The eventual idea is to generate missing images on the fly but I'm not to that point.

Regardless, it seems to take hours for the images to get cached or something and show up once uploaded. It takes a reboot of the entire HAOS to make them visible immediately.

I was hoping there was a seperate web service or something I could send a command to restart.

verbal ether Aug 10, 2025, 3:28 PM

#

Regardless, it seems to take hours for the images to get cached or something and show up once uploaded. It takes a reboot of the entire HAOS to make them visible immediately.
I download radar images every 15 minutes and they're updated immediately on my dashboard.
Post your code to show what you're trying to do.

candid crescent Aug 10, 2025, 3:40 PM

#

I've been dabbling lately with fixing the media/frontend security authorization. Only updated picture card for now, but using media might be more accessible in the future.

https://github.com/home-assistant/frontend/pull/26291

#

No idea what this caching delay could be coming from though.

#

Are you generating new filenames with each image, or rewriting existing files? The latter would probably be cached.

winter kiln Aug 10, 2025, 5:47 PM

#

candid crescent Are you generating new filenames with each image, or rewriting existing files? T...

I'm generating a new file name. I'm using the Samba share add-on to upload form my computer. I've not switch to my chatgpt script to automate yet since I can't get this to work. I think ideally I'd want to use a media location since essentially that's what this is.

winter kiln Aug 10, 2025, 5:50 PM

#

verbal ether > Regardless, it seems to take hours for the images to get cached or something a...

Well like I mentioned I can't even make the images appear in a picture card. This is how I references these normally in my custom button card

styles:
  card:
    - background-color: rgba(0, 0, 0, 0)
    - background-image: >
        [[[ return
        `url('/local/weather/${states['sensor.weather_prompt_file_id'].state}.png')`;
        ]]]```

winter kiln Aug 10, 2025, 6:08 PM

#

#

Newly created, and uploaded, an image. The custom button card (and picture card) can not display it. The custom button card displays file name its needing in bottom right.

winter kiln Aug 10, 2025, 6:59 PM

#

okay well its weirder because the reboots are not helping at all.
These newest 3 won't show up in a picture card at all. Didn't realize how long it took them to show up.

#

images displays fine in Studio Code Server add-on

#

Okay so it seems to work for all images when referencing the local IP address but not when using the DuckDNS domain.

#

://.duckdns.org:8123/local/weather/020005P.png <--loads
://.duckdns.org:8123/local/weather/030110A.png <---404 error. I did a ctrl+F5, on this image page directly and it loaded and now it displays in the home page on THIS desktop but not any other client. ctrl+F5 on the dashboard does NOT work to force the image to load. Not sure I know enough about duckdns to know what's going on.

verbal ether Aug 10, 2025, 8:48 PM

#

This may not fix the issue with DuckDNS, but try adding triggers_update: all. My card triggers after an automation triggers. I also append a timestamp to "force" reloading the current image; the only file available is /local/WU-animated.png. Here's my radar card. ```yaml
type: custom:button-card
triggers_update: automation.download_latest_gif
styles:
card:
- background: "[[[return url(\"/local/WU-animated.png?v=${Date.now()}\") ]]]"
- background-size: contain
- background-repeat: no-repeat
- height: 271px

winter kiln Aug 11, 2025, 1:04 AM

#

verbal ether This may not fix the issue with DuckDNS, but try adding `triggers_update: all`. ...

this did not seem to have an affect but thank you for the suggestion.

verbal ether Aug 11, 2025, 2:06 AM

#

candid crescent No idea what this caching delay could be coming from though.

I've done my own experiment and it does seem to be a caching issue, but it might just be on the client side. Refreshing & hard-refreshing did not update the image. Clearing the cache did but then it was back to not working when the image should have changed. I even restarted the Samba share add-on. I tried different quotation marks but I don't think that was the issue, but it was something to test. (I used an input_boolean's state for the file/path and a file called on.jpg that I renamed to off.jpg and vice versa for testing.) Defining the entity in the card allowed me to switch between on/off making the triggers_update not necessary but I kept it just for good measure.
The fix, for me, was adding the timestamp to the path. When the file is renamed, it will still show (even though the file is gone and has already been loaded), but clicking will show the new file. ```yaml
type: custom:button-card
triggers_update: input_boolean.tester
entity: input_boolean.tester
show_icon: false
name: >
[[[ return
url("/local/${states['input_boolean.tester'].state}.jpg?v=${Date.now()}\"); ]]]
styles:
card:
- background-color: rgba(0, 0, 0, 0)
- background: >
[[[ return url("/local/${states['input_boolean.tester'].state}.jpg?v=${Date.now()}\");
]]]

#

In this screenshot, card was loaded with off.jpg. off.jpg was renamed to on.jpg. (So, off.jpg no longer exists but on.jpg does.)

#

IIRC, this was a similar issue that I dealt with regarding the radar image I showed above and why I use ?v= which has worked for years.

#

I guess it was only a year ago that I got this working: #frontend-archived message

#

I imagine the entire www folder is passed to the client when the dashboard is loaded but I don't understand why it doesn't get the "new" file even after a lovelace_updated event is fired (from editing the dashboard).

winter kiln Aug 11, 2025, 3:06 AM

#

verbal ether IIRC, this was a similar issue that I dealt with regarding the radar image I sho...

ooh interesting could you explain a bit about what v= does? is it just the last modified time? since I store my weather scenes for re-use I'm often reusing a pleasant night scene all month.

#

ahahaha not to be used with trigger all as it spasms out. it was flashing non-stop.

but that worked!

there's also some mild syntax error that breaks it from reading the rest of the styles and was not resizing correctly so I had to place the image at the end of the block. it wasn't reading at least height until I did.

styles:
  card:
    - background-color: rgba(0, 0, 0, 0)
    - background-size: cover
    - background-position: bottom
    - box-shadow: none
    - padding: 0.2em
    - margin: 0
    - border: none
    - height: 250px
    - background-image: >
        [[[ return
        `url('/local/weather/${states['sensor.weather_prompt_file_id'].state}.png?v=${Date.now()})`;
        ]]]```
but this will break tomorrow right as version will no longer be today?

verbal ether Aug 11, 2025, 3:24 AM

#

ahahaha not to be used with trigger all as it spasms out. it was flashing non-stop.
Yeah. I found that out the hard way too.
could you explain a bit about what v= does?
Honestly, I don't completely know. A quick Google search leads me to this:
In computer architecture, particularly with CPU caches, each cache line has a "V bit" or "Valid bit." This single bit indicates whether the data stored in that particular cache line is "valid" or "consistent" with the main memory.
While the "V bit" is a fundamental concept in hardware caching, its relevance to "HTML cache" in the context of web development is primarily conceptual. Web browsers and servers also employ caching mechanisms to store copies of web resources like HTML, CSS, JavaScript, and images to improve loading times.

this will break tomorrow right as version will no longer be today?
It will be okay. All it is doing is acting like a random number and force reloading the image.

#

Interestingly, YouTube links use watch?v=... but, at least in that context, the v could be video.

winter kiln Aug 11, 2025, 3:28 AM

#

Likely. Well this is closer than ever thank you! Since it'll drop below 55 degrees tonight I got to see the dragon wearing a scarf for the first time. Now I can fully automate new images using chatgpt hopfully.

#

....need to make sure in my prompt he doesn't have extra legs next time though lol

verbal ether Aug 11, 2025, 3:42 AM

#

I was working on something similar though not as fancy with ChatGPT. (Background changer based on weather/holidays but I was using .mp4 files.)

#

#

winter kiln Aug 11, 2025, 3:46 AM

#

Ah that's very interesting. I'd love to see your code for that "

verbal ether Aug 11, 2025, 3:49 AM

#

I use /Skapershik/lovelace-animated-background. You can see the code for its use in the beginning of my dashboard https://github.com/dsellers1/home-assistant/blob/main/dashboards/fire-10/fire-main.yaml. The "setting" comes from the state of the text.text entity. I never followed through with getting everything set up so it is constantly showing "smoke" videos.

#Using images in dashboards. Images not showing up.