Use picture from media in dashboard?

Configuration Frontend
1 
views:
  - title: Home
    sections:
      - type: grid
        cards:
          - type: heading
            heading: null
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                entity: light.my_light
                entity_picture: /local/dup.png
                show_icon: true
                styles:
                  card:
                    - width: 115px
                    - height: 115px
                  icon:
                    - width: 115px
                    - height: 115px
              - type: custom:button-card
                entity: light.my_light
                entity_picture: media_source://media_source/local/dup.png
                show_icon: true
                styles:
                  card:
                    - width: 115px
                    - height: 115px
                  icon:
                    - width: 115px
                    - height: 115px
              - type: custom:button-card
                entity: light.my_light
                entity_picture: /local/
                show_icon: true
                styles:
                  card:
                    - width: 115px
                    - height: 115px
                  icon:
                    - width: 115px
                    - height: 115px
      - type: grid
        cards:
          - type: heading
            heading: null
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                entity: light.my_light
                entity_picture: /local/
                show_icon: true
                styles:
                  card:
                    - width: 115px
                    - height: 115px
                  icon:
                    - width: 115px
                    - height: 115px
              - type: custom:button-card
                entity: light.my_light
                entity_picture: /local/
                show_icon: true

How to I just add things from my Media which I uploaded to this dashboard? It doesn’t show up even if I directly open the picture and use the link and paste it in. What am I doing wrong here?

2

It’s called dup.png, so I put /local/dup.png

3

You need to create a folder called www and place the file there

image
image475×105 1.91 KB

www=local you then can reference the file using local.

Specifically this :arrow_down:

Hosting files

If you want to use Home Assistant to host or serve static files then create a directory called www under the configuration path (/config). The static files in www/ can be accessed by the following URL http://your.domain:8123/local/

EDIT…just saw your button card code is incorrect for entity_picture: here

image
image888×180 7.23 KB

The correct format

type: custom:button-card
show_entity_picture: true
entity_picture:  /local/xxxx.png
4

How can I upload Media from the media page directly into there?

5

Where even is the “media” folder located? Like the one in the side bar

6

Hello
For me in configuration.yaml

homeassistant:
  media_dirs:
    local: /media

Then the /media path becomes part of /local .
And put the mp3 in a folder in HA under

/media/mp3

(The media folder already exists, you would want to add a sub folder to that, or at least I did, to keep your OCD happy.)
When I want to use an MP3, the path is

media-source://media_source/local/mp3/Ships_Bell_4.mp3

Adjust as you desire, but that is a basic version of mine.
Longer version in here: HA Config

7

Oh ok I didn’t know I could even do that

8

So what if I’m using a custom:button-card how am I supposed to add it? Is it just

picture_entity: /local/media/dup.png
On the dashboard? I tried it and didn’t get anything. Just a white box. If I add a Boolean to it, it just shows the booleans icon photo.
I directly uploaded it right to the Media folder.

9

Do you mean entity_picture: ?

10

Yes. Changed it to show_entity_picture too. Nothing is available from the www folder. I even just put the same png files in there. It’s not available. How would someone access something from the www folder from the external Internet? Or just internally at least. Idk what I did wrong. I added media to my config too.

11

Do I need to somehow enable the http server in config?

12

When you are in your file editor, what happens when you click on the png file?

13

It says 401 unauthorized. Huh. I assumed it would display the picture. I uploaded it via file editor.
*I’m on the same local Network RN theirs no reason it shouldn’t work right? I mean it’s not like it could be an issue with loading it from a port that isn’t forwarded.

14

Yes it should display the image in a browser tab.

Add this to your configuraton.yaml restart HA and test again

homeassistant:
  allowlist_external_dirs:
      - /config
15

May I ask what that does? Is there some sort of documentation? If you happen to know.

16

Ok it’s still not working

homeassistant:
  packages: !include_dir_named packages
  allowlist_external_dirs:
      - /config  
  media_dirs:
    local: /media

:man_shrugging: I think I broke it

17

I had you add that to see if it would provide access to the folder.

401 is a HTTP error

  1. Do you HTTP set up in your config?
  2. Is your user set to Advanced Mode?

image
image1028×140 6.68 KB

http:
  use_x_forwarded_for: true
  trusted_proxies:
     - 172.30.33.0/24
18

It’s setup using https. It has a letsencrypt certificate and doesn’t use http unsecure to my knowledge. And yes it’s in advanced mode.

19

What does that do?

20

I provided you a link earlier in this thread :arrow_up:

When testing are you using your internal IP address http://homeassistant.local:8123 or your external?