I have a list with a dropdown the has the following




What i would like it when a user selects say Gold, it shows a image of a gold medal in a column next to it in the same list


  • This worked awesome. Just needed to add the extension: ="<img src='PATHTOIMAGE/IMAGE_" & [ColorColumn] & ".jpg'>":
    – user75484
    Apr 17 '18 at 19:32

There is a quick trick, A Calculated Column set to Datatype=Number will be interpreted as HTML; so you can use:

="<img src='PATHTOIMAGE/IMAGE_" & [ColorColumn] & "'>"

which will display images IMAGE_Gold IMAGE_Silver IMAGE_Bronze

This ofcourse requires images in a document or picture library somewhere. Don't forget to set the Calculated Column to datatype=Number, or you will see the HTMLcode displayed.

Plus.. it won't work in Display/Edit forms. To prevent the Calculated Column to show up on those forms hide it. One quick way is to NOT add the Calculated Column to contenttypes (option at the bottom of the Calculated Column create screeen)

CSR is a cleaner solution but takes JavaScript programming, way more time and you have to add the JSlink to each and every View where you want to use it.


You can use Client-Side rendering (JS Link) to show the image based on dropdown value.

Please have a look at:

Client-side rendering (JS Link) code samples

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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