How to Show Images in Info Messages in ServiceNow

I was recently working with a client who wanted to show an image whenever a specific addInfoMessage was displayed on the incident form. My first thought was that this was going to be a piece of cake since I knew that Info Messages (used in an “onDisplay” Business Rule in this case) could contain HTML.

So I began down my path. I first went to the “image picker” to find a suitable image; while there were a number of potential candidates, nothing really “popped”; so I decided I would add my own image/icon:

    1. First I went to Google’s image search and quickly snagged a great looking icon
    2. Opened the icon up in Gimp, and resized it to 20×20 (was 256×256 which was way too big for an info message)
    3. I then went to System UI -> Images -> New
    4. Specified a Category of “General”, and “Name”: IconName.png
    5. Then uploaded the image
    6. Now with the image in place we theoretically just needed to reference it in the infoMessage
          gs.addInfoMessage('<img src="IconName.pngx" /> This task message includes an icon')

And All Done… Right? Well, not so fast. Apparently, ServiceNow doesn’t display┬áthe image correctly when it is called in this manner. In order to workaround this behavior we have to perform some inline CSS styling (Nasty I know…) in order to display it “inline” with a width of 20px:

          gs.addInfoMessage('<img style="display: inline !important; width: 20px;" src="IconName.pngx" /> This task message includes an icon')

After adding in the styling the image was displayed properly and all again was right with the world.