Static images in Looker

When designing a dashboard in Looker, I came to an issue with a bar chart showing numbers of items in multiple categories. Some of the categories were mutually exclusive, others were intersections. This wasn't clear from the first sight, so I decided to draw a diagram of a decision tree and add it to the dashboard.

However, another problem came up - How to add a static image to a Looker dashboard? After a while of, googling I found out.

At first, you need to create a text field in your Looker dashboard, it should include:

<div class="vis">
<center>
<img src="data:image/png;base64," alt="" />
</center>
</div>

Then you draw an image and use base64 command in terminal (I am working on Mac) to convert the image to an encoded string:

base64 -i MyImage.png -o MyImage.png.base64

It is likely, that the whole string will be huge, so to copy to the clipboard you can use:

pbcopy < MyImage.png.base64

When the image is copied, just paste it after the comma in <img src> field and voilà! You have a static image in your dashboard.

If you think about it, it is possible to use only <img src> without using <div> or <center>, but that wouldn't create a nice image. Looker text fields currently have hardcoded width of the body, so the image shown by default would not be visible whole and you would have to use scroll bars. There is a workaround, wrapping the image in <div class="vis">, which shows the image on the white background. By default, everything is aligned to left, so to the center the image, you need to use <center>.