0

On my sharepoint site, I have a list that has images stored in a hyperlink/images column that i need to display. I have been trying to apply the two following questions to my use case, & I cannot seem to get it to work properly because I want the image to change with the query string parameter. I am able to get the correct image url from the list, but I want to be able to use that url in the image tag to display the image. I have some working code below, where the image variable has the image url, please tell me what I am doing wrong here? Thank you in advance!

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

How to retrieve image column from SharePoint List using REST API

working code:

<html lang="en"
<head>
    <meta charset="utf-8">

</head>
    <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type=text/javascript>
        jQuery(document).ready(function() {
            JSRequest.EnsureSetup();
            var itemId = JSRequest.QueryString["PAM"];
            var urlFilter = "my_site/_api/web/lists/GetByTitle('ImageTest')/items?$filter=ID eq "+itemId;
            console.log(urlFilter);
            $.ajax({
                url:urlFilter,
                headers:{
                    "accept": "application/json;odata=verbose"
                },
                success: function (data) {
                    console.log('Success');
            var parser, xmlDoc;

            var text = data.children[0].outerHTML;
            console.log(text);
            parser = new DOMParser();
            xmlDoc = parser.parseFromString(text,"text/xml");
            console.log(xmlDoc.getElementsByTagName('entry')[0].getElementsByTagName('content')[0].getElementsByTagName('m:properties')[0].getElementsByTagName('d:Images')[0]);
            var image= xmlDoc.getElementsByTagName('entry')[0].getElementsByTagName('content')[0].getElementsByTagName('m:properties')[0].getElementsByTagName('d:Images')[0].getElementsByTagName('d:Url')[0];

            console.log(image);
              
                 $("#Image").append('<img src="' + image + '"/>');
                  },

                error: function (data) {
                    alert("Got an error dude... " + data);
                },       
            }); 
        });    
         
    </script>
<div id = "Image" class=""> </div>
<div>
<img src= "image" alt="none" width="500" height="333">
</div>

    </body>
</html>```
0

I actually solved my own question.

<!DOCTYPE html>
<html lang="en"
<head>
    <meta charset="utf-8">

</head>
    <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type=text/javascript>
        jQuery(document).ready(function() {
            JSRequest.EnsureSetup();
            var itemId = JSRequest.QueryString["PAM"];
            var urlFilter = "my_site/_api/web/lists/GetByTitle('ImageTest')/items?$filter=ID eq "+itemId;
            console.log(urlFilter);
            $.ajax({
                url:urlFilter,
                headers:{
                    "accept": "application/json;odata=verbose"
                },
                success: function (data) {
                    console.log('Success');
            var parser, xmlDoc;

            var text = data.children[0].outerHTML;
            console.log(text);
            parser = new DOMParser();
            xmlDoc = parser.parseFromString(text,"text/xml");
            console.log(xmlDoc.getElementsByTagName('entry')[0].getElementsByTagName('content')[0].getElementsByTagName('m:properties')[0].getElementsByTagName('d:Images')[0]);
            var image= xmlDoc.getElementsByTagName('entry')[0].getElementsByTagName('content')[0].getElementsByTagName('m:properties')[0].getElementsByTagName('d:Images')[0].getElementsByTagName('d:Url')[0].textContent;

            console.log(image);
        var display = '<img src="' + image + '"' + 'width="400"' + 'height="500">';

            $('#Image').html(display);
                  },

                error: function (data) {
                    alert("Got an error dude... " + data);
                },       
            }); 
        });    
         
    </script>
<div id = "Image" class=""> </div>

    </body>
</html>

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.