locked
Add new image to itemDetails.js

    Question

  • Im using the Grid App Template to make and app.  Im trying to add a fullscreen image (1920X1080) when you click on a tile in one of the groups.  I added var image links in the JS file but I'm stuck on how to reference the image into the JS.  Please help me!

    (function () {
        "use strict";

        WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
                var ww_1 = "images/puzzles/ww_1.png";
                var ww_2 = "images/puzzles/ww_2.png";
                var ww_3 = "images/puzzles/ww_3.png";


                element.querySelector(".titlearea .pagetitle").textContent = item.group.title;
                element.querySelector(".content").focus();


            }
        });
    })();

    Tuesday, January 08, 2013 12:15 AM

Answers

  • Hi,

    Try to set the image path as follow:

    <img src="ms-appx:///testimages/testimage1.png" />


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Monday, January 14, 2013 10:58 AM
    Tuesday, January 08, 2013 7:26 AM
  • If your images folder is in the root of your project, then the URIs should be "/images/puzzles/..." (starting with a /, which is a shortcut for ms-appx:///). That way they're referenced from the project root. As you have it written, you have a relative URI from the HTML fragment, which will end up looking in /pages/itemDetail/image/puzzles/... and likely failing.

    How are you trying to display the image, then? In an img element? As a background via CSS style?

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press



    Tuesday, January 08, 2013 5:00 PM

All replies

  • Hi,

    Try to set the image path as follow:

    <img src="ms-appx:///testimages/testimage1.png" />


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Monday, January 14, 2013 10:58 AM
    Tuesday, January 08, 2013 7:26 AM
  • If your images folder is in the root of your project, then the URIs should be "/images/puzzles/..." (starting with a /, which is a shortcut for ms-appx:///). That way they're referenced from the project root. As you have it written, you have a relative URI from the HTML fragment, which will end up looking in /pages/itemDetail/image/puzzles/... and likely failing.

    How are you trying to display the image, then? In an img element? As a background via CSS style?

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press



    Tuesday, January 08, 2013 5:00 PM
  • Any method would be fine to implement.  The image itself just needs to match res of device on all Windows 8 platforms. 

    Also Im a little confused where to distribute pictures. I want a total of 20 images to display each on their own "itemdetails" page by pressing group tiles on the homepage.  Possible to show me some sample data if I have 20 images named picture1- picture20? Sorry, new to Java....

    I started reading your book!!!




    • Edited by nmillett Friday, January 11, 2013 9:11 AM
    Friday, January 11, 2013 6:46 AM