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

3
  • Are you using Modern pages or classic pages? Commented Jan 7, 2020 at 8:13
  • classic pages only. Commented Jan 7, 2020 at 9:10
  • Are you able to use content editor/script editor in your site? Commented Jan 7, 2020 at 9:16

1 Answer 1

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.

11
  • Have you tried this? were you able to get the picture column from sharepoint list using REST API? Commented Jan 8, 2020 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 Commented Jan 9, 2020 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. Commented Jan 9, 2020 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? Commented Jan 23, 2020 at 10:41
  • What is the error message/text? What is the internal name of your hyperlink/picture column? Is it required field? Commented Jan 23, 2020 at 11:05

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.