Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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>' +
                            '</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).

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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.

share|improve this answer
    
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 '13 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. –  Robert Lindgren Mar 27 '13 at 11:00
    
Thanks again for the response - I have attempted a number of variations, which is why I am here... ;) –  Tron Mar 27 '13 at 11:08
    
OK, can you please update your post with an example of how the URL you retreive looks like? –  Robert Lindgren Mar 27 '13 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 '13 at 11:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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