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

Posted 2023-03-13

【中文标题】Ionic2 - 给定路径，无法在 UI 上显示本地图像

【英文标题】：Ionic2 - Cannot display local image on UI given its path

【发布时间】：2017-09-20 17:59:24

【问题描述】：

我做了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

知道如何完成这项工作吗？

【参考方案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.');
    );

希望这会有所帮助！