How to retrieve value of type hyperlink from managed property in display template?

Question

I have a site column of type HyperLink / Picture where the url for the icon is stored. I want to access this in the custom display template for search items.

Whenever I try to access the site column named ServiceIcon as described above, it retrieves null value. I have checked it using another tool whether any sort of value is being assigned to this managed property or not and it shows that correct value has been assigned to it. The following is the code:

<mso:ManagedPropertyMapping msdt:dt="string">'Title':'Title','Path':'Path','Description':'Description','EditorOWSUSER':'EditorOWSUSER','LastModifiedTime':'LastModifiedTime',
 'CollapsingStatus':'CollapsingStatus','DocId':'DocId','HitHighlightedSummary':'HitHighlightedSummary','HitHighlightedProperties':'HitHighlightedProperties','FileExtension':'FileExtension',
'ViewsLifeTime':'ViewsLifeTime','ParentLink':'ParentLink','FileType':'FileType','IsContainer':'IsContainer','SecondaryFileExtension':'SecondaryFileExtension','DisplayAuthor':'DisplayAuthor','ServiceOffering':'ServiceOffering','ServiceColor':'ServiceColor','ServiceIcon':'ServiceIcon'

var pictureURL = $getItemValue(ctx, "ServiceIcon");
pictureURL.overrideValueRenderer($urlHtmlEncode);
alert("pic URL : " + pictureURL);

This alert displays null value. I have verified and the mapping with the crawled property has been done correctly. Please help.

Answer 1

To my understanding it seems like you are trying to fetch a site column of type hyperlink/picture and in display templates instead of getting src you are getting entire html tag of an image.

I also came across similar issue.

I would suggest let the value be as it is i.e. an html tag of an image and embed it in a Div.

But before that use below JavaScript to encode the value

var yourImg = jQuery('<div/>').html(YourMappedProperty.inputValue).html();

and place yourImg inside a div, and your picture will be viewed.

I hope its helpful.

Answer 2

You need use the managed property for the hyperlink as below

<span ><img src="_#= ctx.CurrentItem.ProfilePhoto =#_" height="150px" width="150px" /></span><br/><br/>

Here profile photo has the hyperlink which is in a SharePoint List. Make sure your managed property is retrievable.