<img> Link in Custom SP2013 table (jQuery / Custom Form)

Question

The basic idea is I am using jQuery to get the details and display name for a custom layout. I had posted a few weeks back asking how to concatenate a display name and then take that field and wrap it into a table & <img> in order to display a thumbnail on a custom form.

In that process I could not figure out how to properly configure things and my lack of SP knowledge made it difficult to solve, so I am now going to add a new column with the complete link. Let me provide the details and start from the end.

The end result is to use this code snip to display an image from my SP list. the code below works if I hard code the line into the WebPart for the custom form.

<tr>
  <td rowspan="4">
    <img src="https://xxx.sharepoint.com/sites/SharedDocuments/AssetManagement/ABC/ABC-DEF/thumbnail.jpg" alt="Thumbnail">
  </td>
</tr>

The link will be dynamic based on a folder structure that changes per item, so that means "xxx.sharepoint.com/sites/SharedDocuments/AssetManagement/ABC/ABC-DEF" would change to something else.

The jQuery that is being used populates the item selected and on the custom form, I have other rows or items being called in this way, where the field names are in quotes after data-displayName="ColumnName"

<tr><td>Name *</td><td><span class="Template" data-displayName="Name"></span></td></tr>

My question is, how do I take a valid (that points to an image) field called 'imgThumbnail' (from jQuery results) what would be called as data-displayName="imgThumnail" and wrap it in the <img src=" "> format in order for it to display in my table?

I have tried a few different versions of this, but it is returning with a broken image in the table.

<img class="Template" src="data-displayName=&#34;imgThumbnail&#34;">

I am sure it is something simple that I am missing or doing wrong, so any help is appreciated.

Answer 1

Hi @Hack-67 ,

From your description, my undertand is that you want to get the field imgThumnail value from your list. Please correct me if I misunderstood.

To get the field value of the listitem, I would suggest you use JSOM to achieve. Below is a demo for your reference to get the listitem:

https://www.codesharepoint.com/jsom/get-list-item-in-sharepoint-using-jsom

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.