Windows 8 app (html & Javascript) : alternate way to show image from picture library (other that file picker)

问题

I have been trying to create an alternate method to get and show images in listview (I mean other than file picker) as the app is already taking too much time to load and process. It turns out I've been missing one single point all this time..that img doesn't take absolute paths as source (src).

Code I've used is :

var pictureLibrary = Windows.Storage.KnownFolders.picturesLibrary;
pictureLibrary.getFilesAsync(query).then(function (items) {....};

Well, the data binding is correct and the listview is getting all file data including the file path. no problem in that. Although the visual studio is prompting an exception from file (base.js) on using absolute paths for an image tag:

"0x80004004 - JavaScript runtime error: Operation aborted
If there is a handler for this exception, the program may be safely continued."

So, will the problem go if the exception is handled ? Or is it that there is no way to show an image from pictureLibrary in img tag in HTML(and so in listview) ?

Is there any alternate way to get image from pictureLibrary? And one more thing...what will be better: using file picker or loading it directly using file data(I.e. the thing I'm trying here).

I am a little naive when it comes to javascript, so please be descriptive. Let me know if I'm missing any information.

回答1:

So my understanding is that items holds the images from the picture library. Then you can display them the following way:

for (var i = 0; i < items.length; i++) {
    var image = document.createElement("img");
    image.src = URL.createObjectURL(items[i]);
    container.appendChild(image); // container is where you want to append them
}

I have used the following example.

来源：https://stackoverflow.com/questions/12435808/windows-8-app-html-javascript-alternate-way-to-show-image-from-picture-lib