Display image from a list(column-hyperlink/image) using REST Api

Question

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:

Answer 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.