Referencing Images in Custom Tiles

Hi, can someone advice what the correct way to reference local images is within a custom tile?
I have a few photos that I want to use as background images for divs.
I know that I can convert them to base 64 encoded images but I am getting an error when trying to save the custom tile when I do that even though the html is valid etc.
Is there a way to upload images and then reference with a relative path or something similar?

thanks

@Ben_Iffland, can you please share your code so we can better understand how your reference the local image? Please note that you may need to allow the mixed-content if your local image is accessed via http instead of https. And here is a quick example showing my local camera image as the <div> background image in Custom Tile.

Hi, I was trying to reference using a base 64 encoded image like this:

<img style="width: 479px" src="data:image/jpeg;base64, /9j/4AAQSkZJRgABAQEAYABgAA

(Note thats just a snippedt as the actual string is very large).

That does work for some base 64 images but not others not sure if there is some line limitation or if its funny characters in the base 64 encoded string. It did work when I copied the string to a separate html file and just opened that in a browser.
So… I was wondering if I could just reference a local image so e.g. I upload an image to smart tools, then I reference that from a custom tile. Ideally I don’t want to have to host the image on a server in my house.

Base64 encoded large binary data (like images) should NOT be included directly in the Custom Tile source code. The Custom Tile source code is ultimately stored in a database which means it’s not well suited for binary data and you’ll quickly hit the per document (database entry) size limit.

I would recommend uploading the files somewhere and then reference those sources. If you have a NAS or some other file server on your network, you might be able to use that. Otherwise I would recommend using an online image hosting service. For example, I use Imgur for quickly hosting screenshots or background images.

How To: Add photos to a dashboard - #2 by josh

1 Like

Ok cool sounds good. Might try Imgur

2 Likes