如何将图像源设置为“图片”库中的图片？

Question

我目前正在使用文件选择器来获取图片，使用快速入门教程中的示例代码：Accessing files with file pickers来选择图片。

这很好用，当我尝试使用HTML img标签在屏幕上使用所选图像时出现问题。

openPicker.pickSingleFileAsync().then(
    function (file) {
        if (file) {
            var picture = document.getElementById("pictureId");
            picture.src = new Windows.Foundation.Uri(file.path);
        }
    }
);

图片的file.path采用C:\Users\<user>\Pictures\example.jpg

的形式

我尝试过使用：

• picture.src = file.path
• picture.src = new Windows.Foundation.Uri(file.path)

我还尝试将路径直接复制到<img>标记，以确保它不是屏幕刷新问题，但仍然无法加载。

相应的HTML（如果相关）是：

<div>
    <img id="pictureId" class="pictureClass" src="" />
    <button id="addPictureButton" class="">Add Picture</button>
</div>

我在这里缺少什么？

Answer 1

也许尝试下列其中一项

• picture.src = URL.createObjectURL(file); 或者
• picture.src = window.URL.createObjectURL(file);

参考

• createObjectURL方法：http://msdn.microsoft.com/library/windows/apps/hh453196
• How can I draw an image from the HTML5 File API on Canvas?