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

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? 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 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. 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? 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? Jan 23, 2020 at 11:05

Your Answer

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

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