Question

我做了this教程。

一切正常，但从图库中选择图片时，图片uri已通过其属性img（src）分配给img[src]元素。然后图像显示为已损坏。

我记录了图片URI并获得了以下内容：

content://com.android.providers.media.documents/document/image%3A1792

然后，仅仅为了测试我用真实路径覆盖了url并且还得到了破碎的图像。这是我尝试过的真正道路：

/storage/9016-4EF8/DCIM/Camera/20170422_202334.jpg

然后，我的问题是：如何使用其路径在ionic2 UI上显示图像？

问题可能是嵌入式webview（就像普通浏览器一样）（Ionic/Cordova）出于安全原因没有显示本地媒体的权限？在这种情况下，应该是一种方法或插件来解决这个问题？

在上面的教程中，相机子示例工作正常，因为分配给图像元素的内容是base64格式的图像内容，但我想使用path，因为我认为它更清楚。

我尝试了以下链接中的一些建议但没有成功。也许是一个不适合当前平台的旧链接（或者可能建议没关系，我做了一些错误）。 https://forum.ionicframework.com/t/no-local-image-showing-in-view-on-device/30647

这里有一些我的系统信息：

$ npm -v
3.10.10

$ cordova -v
6.5.0

$ ionic info    
Your system information:    
Cordova CLI: 6.5.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.2
Xcode version: Not installed

关于如何使这项工作的任何想法？

Answer 1

这个问题是由于在android中使用sourceType: CAMERA. PHOTOLIBRARY uri无法在img src属性中显示。要解决此问题，请使用以下代码更正图像路径。

    Camera.getPicture(options).then((imagePath) => {
     // Correcting android photolibrary image page
     this.nativeFilePath = imagePath;
     if (this.pl.is('android') && sourceType === Camera.PictureSourceType.PHOTOLIBRARY) {
       FilePath.resolveNativePath(imagePath)
       .then(filePath => {
           this.nativeFilePath = filePath;
           let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
       });
     } else {
       var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
     }
    }, err => {
     // this.presentToast('upload image fail.');
    });

希望这有帮助！

Ionic2 - 无法在给定路径的UI上显示本地图像

1 个答案: