How to display an image in the form field when the field stores an image URL

[VamsiK144833510]

I am working on a custom scoped application in ServiceNow and trying to display a country flag image on a form.

The image URL is retrieved from an external REST API (ipgeolocation.io) and is successfully stored in a String field (country_flag).

However, instead of rendering the image, the form displays only the image URL as plain text.

I also tried using the Image field type, but in that case the field shows “Click to add photo” and does not render the external image URL.

My goal is to display the actual image on the form using the stored URL, not the URL text itself.

[KrishnaMohan · Accepted solution]

Hi @VamsiK144833510 

I believe we don't have such OOTB attribute or functionality available for URL field type to render or display images from url. However we have some workarounds.

Solution 1:  The HTML field type is designed to render tags. However, it usually shows a toolbar (bold, italic, etc.). We can make this to be "Read Only" so it just looks like an image.

• Change your country_flag field type from String to HTML.

• Create an onChange Client Script (or a Business Rule) that formats the URL into an image tag.

• The Logic: When the REST API returns the URL, don't just save https://..., save:

<img src="https://api.host.com/flag.png" width="50" height="30" />

• ServiceNow will render this HTML directly on the form.

Solution 2: 

If you want the image to look like a native part of the interface without a field box around it, you can use a UI Macro (Global) or UI Page (Scoped).

1. Create a UI Macro (e.g., show_country_flag_image):

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <g2:evaluate var="jvar_my_var" expression="var val = current.getValue('country_flag'); val;" />
    <img src="$[jvar_my_var]" style="height: 40px; width: auto; border: 1px solid #ddd; padding: 2px;" />
</j:jelly>

  2 . Create a UI Formatter (e.g: Render image)
       

    

3. Add a Formatter to the form 

Output : you can see the image on form from url as shown below 

If this helped to answer your query, please mark it helpful & accept the solution.
Thanks!
Krishnamohan

[VamsiK144833510]

Thank you for taking time to provide the above steps,

Instead of url,is there any other way to directly load the image on the form?

[Ankur Bawiskar]

@VamsiK144833510 

for image to shown it has to be stored in ServiceNow

You can't directly render external image directly on platform

You can try HTML type field to hold that image and then make that field readonly

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏