Some picture-elements card help please

Configuration
1

I’m at my wits end with this.

I cannot get my images to show and I’m sure it’s just a path problem but I can’t figure it out.

Here’s what I have:

Screenshot 2022-03-31 at 16.18.58
Screenshot 2022-03-31 at 16.18.581098×536 34.3 KB

And the card is configured thus:

Screenshot 2022-03-31 at 16.20.11
Screenshot 2022-03-31 at 16.20.111944×814 81.5 KB

Any ideas where I’m going wrong?

If I copy the path within VSCode I get:

/Volumes/config/www/images/pond_control/pond_control_background.png

Does that help point to the problem?

The issue doesn’t seem to be the .png as if I use the default image that omes with the card https://demo.home-assistant.io/stub_config/floorplan.png I get the same result.

If I use file:///Volumes/config/www/images/pond_control/main_pump_off.png in Chrome, I can view the image.

Are there issues with the picture-elements card itself?

More clues:

If I use the file editor to browse to the images, clicking on them opens Chrome with the URL:

http://192.168.8.113:8123/api/hassio_ingress/YwJ0lFJRAHS5jNWRGD0MHEF6w5rtv4nwjGC03XNYF_c/api/file?filename=/config/www/images/pond_control/main_pump_off.png

and the image is shown in the browser.

Configuring the picture-elements card as:

type: picture-elements
image: >-
  http://192.168.8.113:8123/api/hassio_ingress/YwJ0lFJRAHS5jNWRGD0MHEF6w5rtv4nwjGC03XNYF_c/api/file?filename=/config/www/pond_control_background.png
elements:
  - type: image
    entity: input_boolean.main_pump
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': >-
        http://192.168.8.113:8123/api/hassio_ingress/YwJ0lFJRAHS5jNWRGD0MHEF6w5rtv4nwjGC03XNYF_c/api/file?filename=/config/www/images/pond_control/main_pump_on.png
      'off': >-
        http://192.168.8.113:8123/api/hassio_ingress/YwJ0lFJRAHS5jNWRGD0MHEF6w5rtv4nwjGC03XNYF_c/api/file?filename=/config/www/images/pond_control/main_pump_off.png

has the images show, though not on iOS devices, just Mac.

I’d really appreciate a pointer as to what is going on here.

2

I now think that this may be a network issue, which is also beyond my current skill set.

If I access HA using http://homeassistant.local:8123/lovelace/koi-pond-test, using the above card config, the images don’t show.

However, accessing HA using 192.168.8.113:8123, the images show, albeit with the less than ideal URL.

Any ideas?

3

think you missing the / in front of the local

  state_image:
    '0': /local/images/landfill_0.png

or the

image: /local/images/plants.jpg
4

Thanks for the help.

As per below, the image still doesn’t show.

type: picture-elements
image: /local/images/pond_control/pond_control_background.png
elements:
  - type: image
    entity: input_boolean.main_pump
    style:
      left: 51.45%
      top: 49.5%
      width: 100%
    state_image:
      'on': >-
        http://192.168.8.113:8123/api/hassio_ingress/YwJ0lFJRAHS5jNWRGD0MHEF6w5rtv4nwjGC03XNYF_c/api/file?filename=/config/images/picture_elements/Main%20flow%20ideal.png
      'off': >-
        http://192.168.8.113:8123/api/hassio_ingress/YwJ0lFJRAHS5jNWRGD0MHEF6w5rtv4nwjGC03XNYF_c/api/file?filename=/config/www/images/pond_control/main_pump_off.png

The state images do.

From VSCode, the path to the image is /Volumes/config/www/images/pond_control/pond_control_background.png
and the relative path is
www/images/pond_control/pond_control_background.png.

I’m at a loss as to how to move forward with this.

I have tried pretty much all combinations so something obvious is missing. Just not obvious to me.

5

Well, this is embarrassing!

I set up a new HA instance just to test out this.

Turns out, after creating the www folder, a restart is required!

Note to self: It’ll be somewhere buried in the docs.