我正在使用文件选取器来获取图片，使用快速入门教程中的示例代码：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>

缺少什么我在这里？

来源

2013-11-22 Robotnik

相关的http://stackoverflow.com/questions/12435808/windows-8-app-html-javascript-alternate-way-to-show-image-from-picture-lib?rq=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?

来源

2013-11-22 01:36:45

非常感谢，很有帮助。仅供参考，picture.src作为blob路径出现，类似于'blob：' – Robotnik

理想情况下，除非您正在编辑映像文件，否则使用缩略图代替满文件。 URL.createObjectURL必须加载整个图像文件 - 可能很大。您可以改为使用StorageFile.getThumbnailAsync或getScaledImageAsThumbnailAsync（仅限Windows 8.1），并将结果（缩略图）传递给URL.createObjectURL。许多图像比整个显示器都大，因此您可以使用这些API来获取尺寸与屏幕大小相对应的“缩略图”，并提高内存使用效率。 –

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

回答

参考之一

相关问题