I'm currently using SPServices to retrieve information from a list and present it on the page. I've retrieved the metadata correctly,and presented it on the page. However, when attempting to display an image, I receive the URL, rather than the image. How is it possible to display the list item image rather than the URL of the image?

The method below simply displays the URL of the image.

$(xData.responseXML).SPFilterNode("z:row").each(function() {    

                var itemImage = $(this).attr('ows_Image');
                var itemName = $(this).attr('ows_Title');

                newElement +=                       
                            '<div class="container">
                                '<div class="item-name">' + itemName + '</div>' +
                                '<div class="item-image">' + itemImage + '</div>' +

I have also tried the following;

<div class="item-image">' + '<img src="itemImage"/>' + '</div>' 

and other such variations. This doesn't return a URL of the image, but rather a "broken image" icon (provided by the browser).

1 Answer 1


Can't you just render an image tag with the link as Source?

<img src="{YOUR RETRIEVED URL}" />

UPDATE: This should do the trick

<div class="item-image">' + '<img src="' + itemImage + '"/>' + '</div>' 

The difference is that you are basically just using "itemImage" as the source of the image, rather than the value of the string variable named itemImage.

  • Hi Robert - Thanks for the response. I got close by having a similar approach of <div class="item-image">' + '<img src="itemImage"/>' + '</div>'. This shows an image placeholder icon, but not the image from the list item.
    – Tron
    Mar 27, 2013 at 10:45
  • then I recommend you to inspect the output and see what is incorrect in the src and hence why the image can not be found. Mar 27, 2013 at 11:00
  • Thanks again for the response - I have attempted a number of variations, which is why I am here... ;)
    – Tron
    Mar 27, 2013 at 11:08
  • OK, can you please update your post with an example of how the URL you retreive looks like? Mar 27, 2013 at 11:12
  • OK - I've updated this the best I can. Simply put, the first attempt simply shows the URL of the image. The actual URL text. Nothing else. The second approach displays a broken image icon. Unfortunately, i'm unable to be clearer than this :)
    – Tron
    Mar 27, 2013 at 11:18

Your Answer

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

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