Knowledge Drop

How do I get an image or gif on my dashboard's text tile or project readme?

  • 5 April 2021
  • 0 replies
  • 1638 views

Userlevel 4

Last Tested: May 15, 2020

 

Option 1: IF YOU HAVE A PUBLICLY ACCESSIBLE URL TO THE IMAGE

You can do this by using html in the title, subtitle, or body parameter of your text tile. Note, that the image you'd like to display needs to be on the public internet (practically speaking, what this means is that if you can open a new incognito window and go to the image's direct link, you can reach it). Note, if an image is in a Github repo and the Github repo is public, you can always add `?raw=true` to the end of the image url to get the direct link for embedding.

You can use the template below, changing out the value of the img src attribute:

<img src="INSERT DIRECT LINK OF IMAGE OR GIF" width="100%" height="25%" border="0" />

 

Option 2: IF YOU DON'T HAVE A PUBLICLY ACCESSIBLE URL TO THE IMAGE

If the image you want to display isn't currently on the public internet, you'll need to upload it to some publicly accessible location.

One quick way to do this is to upload the image file to imgur.com and then grab the direct link by following this stackexchange article.
(Looker does not support or endorse imgur.com; for maximum control and security you should upload your image to a server that your company owns.)

From there, follow Option 1, pasting that link inside the "src".

OPTION 3: IF you can't upload your image publicly

If you can't upload your image publicly, then you can encode your image into a "data uri".

One quick way to do this is to upload the image file to https://ezgif.com/image-to-datauri and then copy the response.
(Looker does not support or endorse ezgif.com. Upload your images there at your own risk.)

Another way to do this without connecting to the internet is to install Firefox as a local data uri converter. (Unfortunately, Chrome and other browsers don't have this option, according to this article.)
(Looker does not support or endorse Firefox. Install it at your own risk.)

From there, follow Option 1, pasting that response inside the "src".

 

This content is subject to limited support.                

 

 


0 replies

Be the first to reply!

Reply