locked
About how to display an image where image_url is in javascript file

    Question

  • Hi,

    Here i have one question.

    In a.html i want to display image where image url is in a.js file. Code is below is incorrect i know but i m  not getting correct code for this. Please help to display an image

    a.html

      <img src="#" id="restaurant"  />

    a.js

    var picture='/images/cuisine_' + forwardcuisinename + '.jpg ';

     document.getElementById("restaurant").innerText = picture;

    Wednesday, October 31, 2012 7:15 AM

Answers

  • (Edited from original posting)

    A URI that's relative (in-package) as well as those starting with http:[s]://, ms-appx://, and ms-appdata:// can be assigned directly to the img's src attribute, e.g.

    document.getElementById("restaurant").src = picture;

    This works for any URI to which you have programmatic access, including relative references, like you're using, along with http[s]://, ms-appx://, and ms-appdata:// URIs.

    If you have a StorageFile object (e.g. from the file picker), a stream (from download responses), or other blob source, then pass that to URL.createObjectURL, then assign the result to the image's src attribute:

    document.getElementById("restaurant").src = URL.createObjectURL(pictureFile, {oneTimeOnly : true});

    The oneTimeOnly option set to true indicates that the blob created by URL.createObjectURL will be automatically cleaned up if you replace that URI with another one later on.

    .Kraig

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


    Wednesday, October 31, 2012 5:27 PM
  • Hi Shilpa_A_S,

    As Kraig has suggested, you can use URL.createObjectURL js function to generate a local (or temporarily) use url from a given object (which could be the blob or stream object of a image, video, binary data ...).

    And if you still want to directly use url string to reference some certain files (like images) in your windows store app (javascript) project folders, you can consider the following means:

    \
    default.html
    images\
    js\
    testimages\
              testimage1.png
    
    pages\
         page1\
              page1.html
              page1.js
              page1.css
    


    Here suppose I have a Windows Store javascript Navigation App with the following file/code structure:

    When app starts, I can navigate from default.html to page1.html (under \pages\page1\ folder). Now, I want to show testimage1.png (in \testimages folder) in page1.html.

    1. I can use absolute path as below which starts with "/", e.g.

    <p>Use Absolute Path:</p>
            <img src="/testimages/testimage1.png" />
    
    

    2. I can use the "ms-appx:///" based extension path, which also works like absolute path from project root. e.g.

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

           
    3. Or I can use relative path like below:

           

    <p>Use relative Path:</p>
            <img src="../../testimages/testimage1.png" />
    
    

    Note that for relative path, it should be relative to the hosting page's path (here it's the page1.html instead of default.html). So if you're using javascript code to specify image path, you can also try compose the path via these rules.


    #Quickstart: Using single-page navigation (Windows Store apps using JavaScript and HTML)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.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!

    • Marked as answer by WinNRock Monday, November 05, 2012 9:56 AM
    Thursday, November 01, 2012 7:26 AM
    Moderator

All replies

  • (Edited from original posting)

    A URI that's relative (in-package) as well as those starting with http:[s]://, ms-appx://, and ms-appdata:// can be assigned directly to the img's src attribute, e.g.

    document.getElementById("restaurant").src = picture;

    This works for any URI to which you have programmatic access, including relative references, like you're using, along with http[s]://, ms-appx://, and ms-appdata:// URIs.

    If you have a StorageFile object (e.g. from the file picker), a stream (from download responses), or other blob source, then pass that to URL.createObjectURL, then assign the result to the image's src attribute:

    document.getElementById("restaurant").src = URL.createObjectURL(pictureFile, {oneTimeOnly : true});

    The oneTimeOnly option set to true indicates that the blob created by URL.createObjectURL will be automatically cleaned up if you replace that URI with another one later on.

    .Kraig

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


    Wednesday, October 31, 2012 5:27 PM
  • Hi Shilpa_A_S,

    As Kraig has suggested, you can use URL.createObjectURL js function to generate a local (or temporarily) use url from a given object (which could be the blob or stream object of a image, video, binary data ...).

    And if you still want to directly use url string to reference some certain files (like images) in your windows store app (javascript) project folders, you can consider the following means:

    \
    default.html
    images\
    js\
    testimages\
              testimage1.png
    
    pages\
         page1\
              page1.html
              page1.js
              page1.css
    


    Here suppose I have a Windows Store javascript Navigation App with the following file/code structure:

    When app starts, I can navigate from default.html to page1.html (under \pages\page1\ folder). Now, I want to show testimage1.png (in \testimages folder) in page1.html.

    1. I can use absolute path as below which starts with "/", e.g.

    <p>Use Absolute Path:</p>
            <img src="/testimages/testimage1.png" />
    
    

    2. I can use the "ms-appx:///" based extension path, which also works like absolute path from project root. e.g.

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

           
    3. Or I can use relative path like below:

           

    <p>Use relative Path:</p>
            <img src="../../testimages/testimage1.png" />
    
    

    Note that for relative path, it should be relative to the hosting page's path (here it's the page1.html instead of default.html). So if you're using javascript code to specify image path, you can also try compose the path via these rules.


    #Quickstart: Using single-page navigation (Windows Store apps using JavaScript and HTML)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.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!

    • Marked as answer by WinNRock Monday, November 05, 2012 9:56 AM
    Thursday, November 01, 2012 7:26 AM
    Moderator
  • doh! Of course...thanks for correcting me :) I'll correct my original post as well.
    Thursday, November 01, 2012 2:48 PM