Can't load image in my tile (start screen)

Question

Hi everyone,

I am a beginner developer, and want to create a Windows Store app (JavaScript) that show all my images (in my picture folder) on the start screen tile (and refresh every 5seconds to the next image).
The code below can read my image files (in the console.log), but it doesn't show anything on the start screen, it show the default static image (from in my package.appxmanifest).

What do I wrong? Can you help me improve this code:

var notifications = Windows.UI.Notifications;

                var template = notifications.TileTemplateType.tileWide310x150ImageAndText01;
                var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

                var tileTextAttributes = tileXml.getElementsByTagName("text");
                tileTextAttributes[0].appendChild(tileXml.createTextNode("This show my vacation photos!"));


                try {
                    var videosLibrary = Windows.Storage.KnownFolders.picturesLibrary;
                    videosLibrary.getFilesAsync().then(function (resultLibrary) {
                        if (resultLibrary.length > 0) {
                            for (var i = 0; i < resultLibrary.size; i++) {
                                // If the returned file was an image, show it to the user.
                                if ((".jpg" === resultLibrary[i].fileType) || (".jpeg" === resultLibrary[i].fileType) ||
                                (".bmp" === resultLibrary[i].fileType) || (".png" === resultLibrary[i].fileType)) {

                                    if (i == null) { return; }
                                    var count = i;
                                    var def = resultLibrary;
                                    var file = resultLibrary[i];
                                    var fullfilename = resultLibrary[i].name;
                                    var withoutLastChunk = fullfilename.slice(0, fullfilename.lastIndexOf("."));
												
                var tileImageAttributes = tileXml.getElementsByTagName("image");
                tileImageAttributes[0].setAttribute("src", "file");
                tileImageAttributes[0].setAttribute("alt", "red graphic");


                                }
                            }
                        }
                    });
                } catch (ex) { }


                var squareTemplate = notifications.TileTemplateType.tileSquare150x150Text04;
                var squareTileXml = notifications.TileUpdateManager.getTemplateContent(squareTemplate);
                var squareTileTextAttributes = squareTileXml.getElementsByTagName("text");
                squareTileTextAttributes[0].appendChild(squareTileXml.createTextNode("Cool winter"));

                var node = tileXml.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
                tileXml.getElementsByTagName("visual").item(0).appendChild(node);

                var tileNotification = new notifications.TileNotification(tileXml);

                var currentTime = new Date();
                tileNotification.expirationTime = new Date(currentTime.getTime() + 600 * 1000);

                notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

Thanks,
Stefan

Answer 1

Hi Stefan,

There is a strict limitation for the image size, see this for more Tile and toast image sizes:

Tile images must have dimensions less than or equal to 1024x1024 pixels, have a file size of less than or equal to 200 KB, and be of type .png, .jpg, .jpeg, or .gif. There are no bit-depth or color requirements for an image as long as it meets the other requirements.

Could you validate the image that you are using?

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

There are all 640x 360 (and few smaller).
But still nothing show up.

Answer 3

Hi Stefan,

I read your code carefully and I found you have a following code:

tileImageAttributes[0].setAttribute("src", "file");

This code means you set the image src as "file"(it is a string) but not a real address. In normal case the code should looks like:

tileImageAttributes[0].setAttribute("src", "ms-appx:///images/redWide.png");

Take a look at the sample: http://code.msdn.microsoft.com/windowsapps/App-tiles-and-badges-sample-5fc49148 should help you as a good tutorial.

By the way, I don't think you can use a picture folder image as the tile image, take a look at http://msdn.microsoft.com/en-us/library/windows/apps/br212855.aspx

The URI of the image source, one of these protocol handlers:                                    

• http:// or https://                            

  A web-based image.

• ms-appx:///                            

  An image included in the app package.

• ms-appdata:///local/                            

  An image saved to local storage.

• file:///                            

  A local image. (Supported only for desktop apps. This protocol cannot be used by Windows Store apps.)

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 4

Why the Windows Store "photo" app can show my picture from my picture folder?

I need a way (code) that it show few photos from inside my picture folder.

Answer 5

Well, I can only tell that we could make a app looks like the "Photo", copy your pictures to your app local storage and then use them. 

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.