Image templates and URL

Configuration Frontend
1

There are many ongoing discussions over images displayed in picture or picture-elements card. Using an image template to display variable images seems like a great solution but it doesn't really work, at least not as it should. As I try the image template solution today, I realized that I had gone down this path before as there was a yaml image template already in my config. The repeated argument is that the cards mentioned are requesting a URL and therefore won't accommodate a local path. I don't think this is true, actually but perhaps there is more than meets the eye.
My image template:

/local/SeasonPix/{{states('sensor.season') }}.png?v=1

The result from the template editor:

/local/SeasonPix/summer.png?v=1

If I use the image entity, picked from system images, only an image placeholder is displayed.
If I paste the above template result into the card, the image is properly displayed. It seems at the card level the URL argument accepts a local path without issue.
My original yaml image template:

  - trigger:
      - platform: time_pattern
        minutes: "/1"
    image:
     - name: Season Image
       unique_id: 53d976bd-b6f6-4a41-93b4-19275ef1bdf1
       url: /local/SeasonPix/{{ states('sensor.season') }}.png?v=1

This also produces the result as shown but as an entity does not cause the image to appear.

2

It works perfectly for me.

That is not a URL. That is a flie path. A url will begin with http:// or https://

Look at all the examples here: https://www.home-assistant.io/integrations/template/#image

Also you need to quote your single line templates. e.g.

url: "http://something//SeasonPix/{{ states('sensor.season') }}.png?v=1"
3

Well it's a relative URL. It might be nice if image platform could support this, but it seems like it does not.

Currently if you want to template an image thats on your own server at /local/, you would have to define a template including the full URL of the server, which probably won't work correctly if you have a different URL for internal vs external network.

4

Yeah it really would. It catches a lot of people.

5

Interestingly it does.

I have a template image that fetches from an http: URL on my local network. The picture is visible when viewing the dashboard remotely from an https: address.

The image entity stores the image from the backend not frontend. So not a problem like using the iframe card.

6

Ah yeah you're right, just checked.

So OP just needs to add his local server URL to the path, and then I guess the server itself does a loopback request that lands on itself, gets the image, and then serves it via image_proxy in a way that works locally or externally. Neat that that works.

e.g. (w/ your IP)

url: http://192.168.1.1:8123/local/SeasonPix/{{ states('sensor.season') }}.png

7

It's the 'something' in your example that is the problem. Are you saying that unless the hypertext prefix is used, HA can't construct a proper path. The picture-elements card only requires a path string which accepts the result of the template as seen in the template editor. I suppose my question is, if the template produces the correct string, why does HA not create an image entity that reflects that string? Maybe it's not possible to create an image entity from a template unless the image resides outside of the local network.

8

So there's very different things happening here.

If I paste the above template result into the card, the image is properly displayed.

When you put a relative URL (/local/SeasonPix/summer.png) into a frontend card, your web browser is fetching that image from the home assistant server. It understands when it sees a relative URL, to offset that from the base URL of the website you are currently on. So it has no trouble finding the image.

A template image technically works very differently. With a template image, you are creating an entity, and giving a URL to the backend server. When you use a card that relies on that template image, the backend, not your web browser, issues a fetch request to get the image provided in the URL.

The base image entity platform was not built to comprehend relative URLs, so it dies saying that you're trying to fetch something that's not really a URL. Once the backend fetches that image, it then serves it to the frontend via a special image_proxy URL, and the frontend fetches that proxied image, not from the same path as the original URL.

And as we discussed, you can make a template for an image on your local server. You just need to provide the full URL (as seen from your local network), not the relative URL.

9

Yes.

This isn't about the card it is about the template integration.

It is not generating the correct string. The template integration wants a URL, not a file path.

karwosts gave you an example of that above

10

Thank you, I have it working. I had previously tried your IP example without success as I didn’t include the port information.
That fixes my problem with the image templates. The Helper for image template, while it creates the proper image with that same string as in the yaml version, still displays ‘unknown error.’
Having succeeded in creating the image template, I still do not think that this will solve the issue with the picture-element card image: argument. This feature does not, as we know does not accept templates and I don’t see a way around that. Even with the image entity, I don’t see a way to extract the image without using a template. Perhaps, like a lot of things, I don’t understand how that works. Inserting an image as an element, which I understand can make use of the image template, doesn’t produce the same look as the primary image: entry.

11

What is different?