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>```
Improve this question

1 Answer 1

Reset to default
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>
Improve this answer

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.