How to change the broken image SVG?

Configuration Frontend
1

I have been banging my head all day trying to figure out a way to override the broken image picture when e.g. a camera feed is not available.

Here’s an example of what I’m referring to:

image
image1498×295 1.56 KB

I tried adding a js module with a custom stylesheet to override the element #brokenimage that I see if I hover on the broken picture-glance card by inspecting the element (see snapshot below) although I understand that because of HA using DOM this is not as straightforward as it could be.

image
image2608×1169 263 KB

The element in question is (from inspecting the element):

#brokenImage {
    background: url(/static/images/image-broken.svg) center center / 36px no-repeat grey;
}

How can I change the broken image svg (ie /static/images/image-broken.svg) with a different file? The reason why this is frustrating is because every so often HA reloads on the wall panel and while reloading I get a bunch of grey images which defeat the purpose of a nice user interface.

Here’s an example of my HA app while loading and fully loaded.

hassio-broken-issue
hassio-broken-issue875×695 210 KB

2

I figured out a way to achieve this although I had to access the filesystem to manually “swap” the svg image with a blank one.

3

Would you provide details on how you did that please?

4

What I did was remove the microSD from my RPi and read it on a live linux distro laptop (or it’d work on a virtual machine environment too, neither Windows nor Mac will be able to access the filesystem so you have to get creative).

Once you put the SD into your PC you’ll see a bunch of drives being loaded, the one that has the image-broken.svg file is called “hassos-data”.

Now the fun part…

To make it short just open the terminal and access the hassos-data folder, once you’re in get root privileges with the following command:

sudo su

Then look for the file image-broken.svg

find ./ -iname "image-broken.svg"

You’ll get a number of folders where the file is in, those are the ones you’re interested in.

What I did was just to swap the image-broken.svg with a file with the same name but just blank.

This method still leaves you with the card being loaded with the default background color (in my case grey for cards with no image).

Ideally I’d want to change that color to black even if no image is found but I don’t know how to do that, if you have a suggestion please let me know.

Good luck

5

Thanks! I’ll give that a try on my setup.

6

I found a sneaky way of achieving the same result without accessing the filesystem that I thought I’d share.

Let me say that I am not a programmer and I only got to this solution by a LOT of trial and error but since it works for me then it might do so for others.

Here’s the steps I took:

  1. Accessed HA panel where a broken image is present (you can also load a non-existent image to trigger it) like so:

    image
    image3152×1302 514 KB

  2. Pulled up the “Dev Tools” in the browser by pressing F12 (or Ctrl + Shift + I also works, not so sure about the Mac combo) and selected the “Sources” tab (highlighted):
    1

  3. Right-clicked on one of the folders (a random one) listed on the left panel and selected “Search in folder” (highlighted):
    2

  4. This brings up a search panel down below. I then deleted whatever was in the search box and typed “brokenImage” (without quotes) then Enter, this brings up the “chunk” file where the function that sets the broken image picture is called (I guess that’s what happens?), then clicked on the brokenImage result (highlighted) to open the chunk file:
    3

  5. The chunk file is then open and the relevant brokenImage section that we searched for is highlighted:
    4

  6. I copied the whole code in the chunk file and pasted it in a file named styles.js that I created within the www folder, then saved (dah?!)

  7. I edited the following lines in the styles.js files from this:

       #brokenImage {
     background: grey url("/static/images/image-broken.svg") center/36px
       no-repeat;
   }

    To this (effectively changing the background color to what I have and deleting the url to the image-broken.svg file):

       #brokenImage {
     background: #0b0e0f no-repeat;
   }

  8. I added the following lines to my config.yaml file (to ensure the styles.js file gets loaded):

    frontend: 
  themes: !include themes.yaml
  extra_module_url:
    - /local/styles.js

  9. Saved, checked the config, and restarted HA after the “all clear”

  10. Ta da! Make sure you delete the cache to see the changes (Ctrl + F5 on Chrome for hard refresh)

    image
    image3077×1459 596 KB

Just for the sake of example here’s the result after changing the color to blue in the “styles.js” file (ugly, but gets the point across):

image
image3127×1445 629 KB

I noticed that sometimes HA still loads the “usual” broken image svg, just refresh until the changes are triggered and you should be good.

If there is a better way of doing this please let me know