2

In my SharePoint Online site, I need to display images from a list on a page using REST API/jQuery.

The images in the list are stored in hyperlink/picture column in the list.

Can someone suggest me how to display image on a SharePoint page? Card view: Card view

  • Are you using Modern pages or classic pages? – Ganesh Sanap Jan 7 at 8:13
  • classic pages only. – Monika Kandregula Jan 7 at 9:10
  • Are you able to use content editor/script editor in your site? – Ganesh Sanap Jan 7 at 9:16
1

Try using code something like below:

<div id='ImgContainerDiv'> </div>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $.ajax({
        url: _spPageContextInfowebroot.webAbsoluteUrl + "/_api/web/lists/getbytitle('ListName')/items?$select=ID,Title,samplelogo",
        method: 'GET',
        headers: {
            Accept: 'application/json; odata=verbose'
        },
        success: function (data) {
            var listData = data.d.results;
            if (listData && listData.length) {
                for (var i = 0; i < listData.length; i++) {
                    if(listData[i].samplelogo) {
                        $('#ImgContainerDiv').append('<img src="' + listData[i].samplelogo.Url + '"/>');
                    }
                }
            }
        },
        error: function (error) {
            console.log(error);
        }
    });
</script>

Where samplelogo is internal name of your hyperlink/picture column.

  • Have you tried this? were you able to get the picture column from sharepoint list using REST API? – Ganesh Sanap Jan 8 at 9:46
  • should we add 'ImgContainerDiv' as id to html element in html file? Actually, we have js file and html file diff in our project...we'll link the js file to html file. Sorry, am new to SharePoint, so kindly help me out if I missing anything – Monika Kandregula Jan 9 at 5:35
  • Yes, check updated answer. div is added in html with ID. This code is adding all items images in one div. you can change it according to your need. – Ganesh Sanap Jan 9 at 5:37
  • am getting an error at 'Url' in this line $('#ImgContainerDiv').append('<img src="' + listData[i].ImageCol.Url + '"/>'); Can you please tell me where am going wrong? – Monika Kandregula Jan 23 at 10:41
  • What is the error message/text? What is the internal name of your hyperlink/picture column? Is it required field? – Ganesh Sanap Jan 23 at 11:05

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.