The Problem

I have pictures that I want to show in my Looker visualization. In a dataset of companies, I could use this to replace a company name with an image in a visualization:

The Solution

We can use the html LookML parameter to have Looker render HTML instead of just showing a text value. In this case, we can use HTML's img tag to have a field just render a picture:

dimension: looker_image {
  type: string
  sql: ${TABLE}.homepage_url;;
  html: <img src="https://logo-core.clearbit.com/looker.com" /> ;;
}

The text for each of the rows has now been replaced by the image defined in the img tag of the HTML.

Dynamic Images

The next step is to make my images change based on the value of the row. We can input the value of the row into the html parameter using the Liquid variable {{value}}. We can add this to the image URL in a slightly modified version of the dimension above:

dimension: looker_image {
  type: string
  sql: ${TABLE}.homepage_url;;
  html: <img src="https://logo-core.clearbit.com/{{value}}" /> ;;
}

Now, the URL changes for each row. In this example, we append company URLs to the end of https://logo-core.clearbit.com/, which is a website that provides many company logo images based on the URLs. Other examples might include using a numeric {{value}} to denote which image to use.