locked
How to display images of dynamic objects in Metro Apps

    Question

  • I have say 10 objects which i get from my remote database. Now each object has a field called image with relative path to my webserver image location. 
    i.e. /media/images/foo/1.jpg, /media/images/foo/2.jpg ....

    Now am using the gridlayout in the metro app. Now these objects have been bound to the list. 

    Problem:- I am not able to display the images. How to do that. I get it that due to security reasons metro apps don't allow outside urls to be accessed dynamically. What is the work around for this ? 

    Wednesday, October 17, 2012 7:03 AM

Answers

  • I was able to accomplish this by using a template on the ListView:

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
      <img class="item-image" src="#" data-win-bind="src: ImageUrl;" onerror="this.src='/images/Placeholder.png'"/>
      <!--other stuff -->
    
    </div>

    I did not run into any problems with this.  ImageUrl will need to be an absolute path to the server though.  You will just need to append your domain name to the beginning of the relative paths you currently have.

    I use the onerror to set a placeholder image to avoid the red x that is displayed until the image is received from the server.


    Dave Paquette @Dave_Paquette www.davepaquette.com

    • Marked as answer by Song Tian Monday, October 22, 2012 1:48 AM
    Thursday, October 18, 2012 4:40 PM

All replies

  • You can load them to temporary folder or even the local folder and then you can get them from that folder and display it.

    I think is a good way.


    Sara Silva

    Wednesday, October 17, 2012 9:45 PM
  • Hello Adesh,

    Can you use local request output caching to download the images to App.local and serve them from there. Not only will that overcome this security issue but it'll also prevent your users from having to re-download the content on subsequent restarts of the application in the future.


    -Aaronontheweb @ http://www.aaronstannard.com/

    Thursday, October 18, 2012 6:33 AM
  • I was able to accomplish this by using a template on the ListView:

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
      <img class="item-image" src="#" data-win-bind="src: ImageUrl;" onerror="this.src='/images/Placeholder.png'"/>
      <!--other stuff -->
    
    </div>

    I did not run into any problems with this.  ImageUrl will need to be an absolute path to the server though.  You will just need to append your domain name to the beginning of the relative paths you currently have.

    I use the onerror to set a placeholder image to avoid the red x that is displayed until the image is received from the server.


    Dave Paquette @Dave_Paquette www.davepaquette.com

    • Marked as answer by Song Tian Monday, October 22, 2012 1:48 AM
    Thursday, October 18, 2012 4:40 PM