SharePoint jsLink replace picture field with value from another field

Question

I would like to override a field with an image using the value of another field. So, I have an image library and the Name field captures the name of the image file. I also have a Hyperlink or Picture field.

I want to override the pic field with the Name field but it's not working. name is undefined.

I know the concept works because if I hard code a static image, the image shows.

(function() {
    var nameFieldContext = {};
        nameFieldContext.Templates = {};
        nameFieldContext.Templates.Fields = {
            "pic": {"View": renderImageToRate }
        };
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(nameFieldContext);
})();

function renderImageToRate(ctx){
alert("In function");
    var name = ctx.CurrentItem.Name;
    
    return "<img src='"+name+">";
}

Any ideas?

Answer 1

Try something like this:

var imgUrl = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    
return "<img src='" + imgUrl + "/>";

OR

var imgUrl = _spPageContextInfo.webAbsoluteUrl + ctx.listUrlDir + "/" + ctx.CurrentItem.FileLeafRef;
    
return "<img src='" + imgUrl + "/>";

Answer 2

@OLA,

The string format seems to be not correct (missing a '):

return "<img src='"+name+">";

You may try below format:

return String.format("<img src='{0}'>", name);

Meanwhile, I suggest you print the name to check its value. Sometimes its value maybe converted to another format.

BR