Fetch and Display image from SharePoint List Javascript

Question

I need to display images from List using jquery/Javascript. Existing approach: Fetching list images using SOAP.

Answer 1

You can use Rest API or CSOM or Data View webpart to achieve your desired result.

Image column would act similar to Hyperlink column, where you would be able to fetch image url from the SharePoint list and display in your HTML structure.

You should know Hyperlink = Picture. So the way of getting Hyperlink is the way of getting Picture column. You just need to make GET request to the following URL.

/_api/Web/Lists/getbytitle('Your List Title')/Items?$select=Image

To learn Rest API : CRUD Operation to List Using SharePoint 2013 Rest API

Reference: How to retrieve image column from SharePoint List using REST API

Note : above method is using rest api, you can also try CSOM or Data View webpart to achieve your functionality.

Answer 2

Know your options

If you can use jQuery then you can use the REST web service instead of the SOAP web service.

The SharePoint 2010 REST web service has a slightly different interface from the 2013/2016 REST web services, but in general it's easier to consume through JavaScript/jQuery than the SOAP-based web services.

If you do need to work with the SOAP web services instead, consider using the SPServices library for SharePoint 2010; it's a JavaScript library that extends jQuery to abstractly work with the SOAP web services.

Intro to the REST web service

If your list is named "My Cool List" and the path to the SharePoint site containing the list is http://contoso.com/sites/mycoolsite then the REST endpoint for accessing the list would be http://contoso.com/sites/mycoolsite/_vti_bin/ListData.svc/MyCoolList. Notice that the list name has its spaces removed. If removal of the spaces would cause any ambiguity about which list you're trying to access, you may need to append a number to the end of the list name (e.g., "MyCoolList0" instead of "MyCoolList").

If you navigate to that URL (replacing the site and list names with values appropriate to your environment) you should see an XML summary or RSS feed (depending on how your browser interprets the response).

Retrieving Data with Asynchronous JavaScript

...using jQuery

Using jQuery AJAX, you can get data from a REST web service endpoint using

$.getJSON('/my/url',callbackFunction);

or

$.ajax({type:'GET',url:'/my/url',success:callbackFunction});

(Replacing /my/url with the proper endpoint URL, and replacing callbackFunction with a valid function you want to run after the response comes back.)

...using XMLHttpRequest

As the saying goes, "You might not need jQuery." You could get away with VanillaJS.

Under the covers, jQuery (and every other JavaScript library that performs asynchronous web requests) uses the built-in XMLHttpRequest object. You can also use XMLHttpRequest directly, without needing to rely on any 3rd party libraries, as in the example code below.

var xhr = new XMLHttpRequest();
xhr.open('GET','/my/url/',true);
xhr.setRequestHeader("Accept","application/json; odata=verbose"); 
xhr.onreadystatechange = function(){
    if(this.readyState == 4){
        if(this.status == 200){
            callbackFunction(JSON.parse(this.responseText));
        }else{
            alert(this.status + ":\n " + this.responseText);
        }
    }
}
xhr.send();

REST API Syntax

Once you know the endpoint URL for accessing your list (e.g. http://contoso.com/sites/mycoolsite/_vti_bin/ListData.svc/MyCoolList) you can tack on additional parameters to select, filter, and expand the items and values you want to get out of the list.

Parameters are added as query string parameters to the URL endpoint. That means they follow the ? at the end of the URL, and are thenceforth separated by ampersands.

url?key1=value&key2=value

This diagram from Microsoft's documentation shows the required format and available parameter keys.

$filter

The $filter parameter is used to limit your results.

For example, a parameter of $filter=Title eq 'My Cool Item' would only return items that have their Title field value set to "My Cool Item".

$select

The $select parameter is used to specify which column values you want included in the results. If you only care about the value in one column, you can use this parameter to tell SharePoint to only give you that column.

For example, a parameter of $select=Title, MyCoolColumn would return only values from the columns entitled "Title" and "My Cool Column"

Notice that in SharePoint 2010, spaces are removed from column display names when you query them with the REST API. And be warned that the names you use are not tied to the internal names of the columns; if the display name of a column changes, you'll need to update your query.

There are other parameters that are useful to know, like $orderby (for specifying the column(s) to sort by) and $expand (for expanding seeing the underlying values of lookup and choice fields), but this is enough to get you started.

Putting it all together

So let's say you have a list called 'My Images' and that list has a text field called 'Image URL'. Every item in the list has the path to an image in its 'Image URL' column.

You can use the following JavaScript to query the list and display the images on the page:

<div id="custom_image_output"></div>
<script>
(function(){
var imageField = "ImageURL";
var url = "http://contoso.com/sites/MyCoolSite/_vti_bin/ListData.svc/MyImages?$select=" + imageField
var xhr = new XMLHttpRequest();
xhr.open("GET",url,true);
xhr.setRequestHeader("Accept","application/json; odata=verbose");
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            var results = JSON.parse(xhr.responseText.replace(/\\'/g,"'")).d;
            drawImages(results);
        }else{
            alert(xhr.status + ":\n " + xhr.responseText);
        }
    }
}
xhr.send();
function drawImages(data){
    var output = document.getElementById("custom_image_output");
    for(var i = 0, len = data.length; i < len; i++){
        var img = document.createElement("img");
        img.src = data[i][imageField];
        output.appendChild(img);
    }
}
})();
</script>

Replace http://contoso.com/sites/MyCoolSite with your site URL, replace MyImages with the name of your list (spaces removed), and replace ImageURL with the display name (without spaces) of the text field you want to retrieve. Note that the code will be slightly different if the image URL is stored in a choice field instead of a text field, or if you're trying to retrieve the images from a library instead of a list.

To add that code to a page in SharePoint 2010, you can past the HTML and JavaScript into a text file, then save the text file to a library in SharePoint. On the page where you want the code to run, add a content editor web part, then edit its properties and in the "Content Link" property put the path to the text file.