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 }

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

Any ideas?

  • The idea here is you need to get the URL of file/image and pass it to src attribute. passing just file name will not work. try my suggestions given below. let me know if it works for you. Dec 10, 2020 at 17:37

2 Answers 2


Try something like this:

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


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


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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.