locked
Displaying image from URL in windows 8 app using java script

    Question

  • Hello

    I am developing a facebook realted app. I want to display the profile pic of logged in user using graph api. I want to display the image using the following URL :http://graph.facebook.com/username/picture in image tag. But I am not able to display the image. Please help me.


    Thanks and Regards, Jagadish Dharanikota

    Tuesday, October 30, 2012 2:25 PM

Answers

  • Hi Jagadish,

    As other members have mentioned, you need to verify if the target image (from internet/facebook site) is publicly accessible. Generally, to display image in Windows Store javascript app, you can consider the following means:

    1) Directly set the "src" attribute of <img> tag to the target image url (if it is publicly accessible) e.g.

    <img style="max-width:200px;max-height:150px;" 
                        src="http://i.s-microsoft.com/global/ImageStore/publishingimages/FY13/asset/features/Surface_BG_1600x540_EN_US.jpg" />

    2) Or you can manually download the image data from internet (via "WinJS.xhr" method) and create a local temp url to display it (this approach works even if you're loading image data from local storage or folders). e.g.

        function loadImageFromWeb() {
    
            var imageUrl ="http://i.s-microsoft.com/global/ImageStore/publishingimages/FY13/asset/features/Surface_BG_1600x540_EN_US.jpg";
    
            WinJS.xhr(
                { url: imageUrl , responseType:'blob'}
                ).done(function (result) {
    
                    var imgTag = document.getElementById('imgManualLoad');
                    var tempLocalUrl = URL.createObjectURL(result.response, { oneTimeOnly: true });
                    imgTag.src = tempLocalUrl;
                }
            );
        }
    

    #Downloading different types of content (Windows Store apps using JavaScript and HTML)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh868280.aspx

    #createObjectURL method
    http://msdn.microsoft.com/en-us/library/windows/apps/hh453196.aspx


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!

    Wednesday, October 31, 2012 3:48 AM
    Moderator

All replies

  • Can you provide more information/code on how you're displaying the image?  Are you using an img tag and pointing its src to the picture? 
    Tuesday, October 30, 2012 3:13 PM
    1. Make sure that the url you are testing with is 100% correct by opening it in a real browser
    2. Make sure that your image is not hidden any way by your css (visiblity: hidden, display: none, height or width zero etc)
    3. Observe the VS output window for errors thrown by IE

    weichhold.com

    Tuesday, October 30, 2012 3:50 PM
  • Hi Jagadish,

    As other members have mentioned, you need to verify if the target image (from internet/facebook site) is publicly accessible. Generally, to display image in Windows Store javascript app, you can consider the following means:

    1) Directly set the "src" attribute of <img> tag to the target image url (if it is publicly accessible) e.g.

    <img style="max-width:200px;max-height:150px;" 
                        src="http://i.s-microsoft.com/global/ImageStore/publishingimages/FY13/asset/features/Surface_BG_1600x540_EN_US.jpg" />

    2) Or you can manually download the image data from internet (via "WinJS.xhr" method) and create a local temp url to display it (this approach works even if you're loading image data from local storage or folders). e.g.

        function loadImageFromWeb() {
    
            var imageUrl ="http://i.s-microsoft.com/global/ImageStore/publishingimages/FY13/asset/features/Surface_BG_1600x540_EN_US.jpg";
    
            WinJS.xhr(
                { url: imageUrl , responseType:'blob'}
                ).done(function (result) {
    
                    var imgTag = document.getElementById('imgManualLoad');
                    var tempLocalUrl = URL.createObjectURL(result.response, { oneTimeOnly: true });
                    imgTag.src = tempLocalUrl;
                }
            );
        }
    

    #Downloading different types of content (Windows Store apps using JavaScript and HTML)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh868280.aspx

    #createObjectURL method
    http://msdn.microsoft.com/en-us/library/windows/apps/hh453196.aspx


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!

    Wednesday, October 31, 2012 3:48 AM
    Moderator
  • Thanq Steven Cheng. It worked for me. I am able to retrieve image from facebook api

    Thanks and Regards, Jagadish Dharanikota

    Wednesday, October 31, 2012 5:19 AM