locked
how to refresh image with same url?

    Question

  • How do I refresh an image element with the same url but updated image file.

    document.getElementById("imageelement").src = "ms-appdata:///local/" + imagefilename;

    Here the file name is same, but when its content is changed after a camera capture if I set the image src as above it doesn't refresh the image. 

    If it is set to a different file name it refreshes.

    How do I show the new image once its captured?

    Tuesday, March 25, 2014 8:22 PM

Answers

  • Hi ner9G,

    Worked with my code, I paste to you.  

    Note: I use the image from Picture Library and when the HTML loaded, the first image would display and I manually replaced second image with a same name and I click the button to reload the image, the updated one displayed.  Should be similar like your scenario.

        <script>
            function refresh()
            {
                var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
                picturesLibrary.getFileAsync("0.jpg").then(function (file) {
                    if (file != null) {
                        document.getElementById("imageelement").src = URL.createObjectURL(file);
                    }
                });
            }
            function onload()
            {
                var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
                picturesLibrary.getFileAsync("0.jpg").then(function (file) {
                    if(file != null){
                        document.getElementById("imageelement").src = URL.createObjectURL(file);
                    }
                });
            }
        </script>
    
    <body onload="onload()">
        <button onclick="refresh()">Click me to reload image</button>
        <div id="container">
            <img id="imageelement" />
        </div>
    </body>

    --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.

    • Marked as answer by ner9G Wednesday, March 26, 2014 1:46 PM
    Wednesday, March 26, 2014 8:28 AM
    Moderator

All replies

  • Hi ner9G,

    Could assign a blank source to the image and then change it back to a correct one. Once the new image captured, there should be a event fired and put following code in your event handler.

    document.getElementById("imageelement").src = "";
    document.getElementById("imageelement").src = "ms-appdata:///local/" + imagefilename;

    --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.


    Wednesday, March 26, 2014 1:51 AM
    Moderator
  • Hi James,

    That didn't work either. Have to do something like below to make it work, which is not pretty.

    document.getElementById("imageelement").src = "";
    setTimeout(function() {document.getElementById("imageelement").src = "ms-appdata:///local/" + imagefilename;}, 500);

    Wednesday, March 26, 2014 5:52 AM
  • Hi ner9G,

    Worked with my code, I paste to you.  

    Note: I use the image from Picture Library and when the HTML loaded, the first image would display and I manually replaced second image with a same name and I click the button to reload the image, the updated one displayed.  Should be similar like your scenario.

        <script>
            function refresh()
            {
                var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
                picturesLibrary.getFileAsync("0.jpg").then(function (file) {
                    if (file != null) {
                        document.getElementById("imageelement").src = URL.createObjectURL(file);
                    }
                });
            }
            function onload()
            {
                var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
                picturesLibrary.getFileAsync("0.jpg").then(function (file) {
                    if(file != null){
                        document.getElementById("imageelement").src = URL.createObjectURL(file);
                    }
                });
            }
        </script>
    
    <body onload="onload()">
        <button onclick="refresh()">Click me to reload image</button>
        <div id="container">
            <img id="imageelement" />
        </div>
    </body>

    --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.

    • Marked as answer by ner9G Wednesday, March 26, 2014 1:46 PM
    Wednesday, March 26, 2014 8:28 AM
    Moderator