使用 cordova-plugin-ionic-webview 版本冲突？

Question

我正在开发一个 ionic3 应用程序。我需要通过相机或画廊从用户那里获取图像，首先将其保存到本地目录，然后将图像上传到服务器。我使用了以下分步教程：https://devdactic.com/ionic-2-images/ 上传照片就像一个魅力，但是在将图像保存到本地目录并将路径保存在本地存储中时，从存储中检索后它显示以下错误：。
很明显，它抱怨 不允许加载本地资源。 接下来，我开始 google 寻找解决方案，我在 StackOverflow 中找到了this 解决方案，在 GitHub 中找到了this。正如他们都建议的那样，问题出在 cordova-plugin-ionic-webview，所以我需要降级版本。当我尝试他们的解决方案时，上传和向用户显示图像的工作正常，但是，它会在应用程序的其他部分产生问题，这些部分无论如何都从资产加载数据；图片、字体。显示以下错误。接下来我在 GitHub here 中找到了该问题的解决方案，正如大多数用户所建议并接受的那样，我们需要使用最新版本的 **cordova-plugin-ionic-webview **，这当然会给我带来第一个问题。 我也会在这里上传代码。`

getImage() {
    this.presentActionSheet();
  } //end getImage
  public uploadImage() {
    console.log('Uploading the image');
    console.log(this.lastImageL);
    var targetPath = this.pathForImage(this.lastImage);

    console.log(targetPath);

    var url = "https://dev.raihan.pomdev.net/wp-json/raihan/v1/profilePhoto";


    var filename = this.lastImage;
    console.log(' targetPath  :   ', targetPath);
    console.log('File Name : ', filename)
    console.log(url, " IS the URL");
    var options = {
      fileKey: "image",
      fileName: filename,
      chunkedMode: false,
      mimeType: "multipart/form-data",
      params: {
        'image': filename,
        'user_id': 79
      }
    };

    const fileTransfer: TransferObject = this.transfer.create();

    this.loading = this.loadingCtrl.create({
      content: 'منتظر باشید',
    });
    this.loading.present();

    // Use the FileTransfer to upload the image
    fileTransfer.upload(targetPath, url, options).then(data => {
      this.loading.dismissAll()

      this.presentToast(' . عکس شما موفقانه ذخیره شد');

      this.storage.set("Profile_Photo", targetPath).then((data) => {
        console.log('response of uploading the image ', data);
        console.log('Target Path ', targetPath);
        console.log('In set storage ', targetPath);
        $("#Photo").attr("src", targetPath);
        $("#Photo2").attr("src", targetPath);
        console.log('myphoto ', targetPath);
      });
    }, err => {
      this.loading.dismissAll()
      this.presentToast('مشکلی در قسمت ذخیره کردن عکس شما وجود دارد  ' + err);
      console.log('error sending the image');
      console.log(err);
    });
  }
  public takePicture(sourceType) {

    var options = {
      quality: 100,
      sourceType: sourceType,
      saveToPhotoAlbum: false,
      correctOrientation: true
    };

    // Get the data of an image
    this.camera.getPicture(options).then((imagePath) => {

      if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
        this.filePath.resolveNativePath(imagePath)
          .then(filePath => {
            let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
            let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
            this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
          });
      } else {
        var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
        var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
        this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
      }
    }, (err) => {
      this.presentToast('Error while selecting image.');
    });
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad CaptureImagePage');
  }
  private createFileName() {
    var d = new Date(),
      n = d.getTime(),
      newFileName = n + ".jpg";
    return newFileName;
  }

  // Copy the image to a local folder
  private copyFileToLocalDir(namePath, currentName, newFileName) {
    this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
      this.lastImage = newFileName;
      this.uploadImage();
    }, error => {
      this.presentToast('Error while storing file. ' + error);
    });
  }

  private presentToast(text) {
    let toast = this.toastCtrl.create({
      message: text,
      duration: 5000,
      position: 'center'
    });
    toast.present();
  }

  // Always get the accurate path to your apps folder
  public pathForImage(img) {
    if (img === null) {
      return '';
    } else {
      return cordova.file.dataDirectory + img;
    }
  }
  public presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select Image Source',
      buttons: [
        {
          text: 'Load from Library',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
          }
        },
        {
          text: 'Use Camera',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.CAMERA);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });
    actionSheet.present();
  }

` 现在我很困惑我应该使用哪个版本的 **cordova-plugin-ionic-webview **？有人可以帮助我吗？

注意：感谢您耐心阅读所有问题。

Answer 1

如果可能，我会尝试使用最新版本的 WebView，然后在 file:/// 路径上使用 window.Ionic.WebView.convertFileSrc() 方法，然后再将其放在页面上进行显示。这些提示可以在这里看到：

• https://ionicframework.com/docs/building/webview

Cordova 和 Capacitor 应用程序托管在本地 HTTP 服务器上，并且 使用 http:// 协议提供服务。然而，一些插件试图 通过 file:// 协议访问设备文件。为了避免困难 在 http:// 和 file:// 之间，必须重写设备文件的路径 使用本地 HTTP 服务器。例如，file:///path/to/device/file 必须重写为 http://path/to/device/file 在应用中呈现之前。

对于 Cordova 应用程序，Ionic Web View 插件提供了一个实用程序 用于转换文件 URI 的函数： window.Ionic.WebView.convertFileSrc()。还有对应的 离子原生插件：@ionic-native/ionic-webview。

这是我使用的一个示例方法，它在 4.x webview 中运行良好：

  getNormalizedUrl(path: string): SafeResourceUrl {
      let newPath = this.domSanitizer.bypassSecurityTrustUrl(
          window.Ionic.WebView.convertFileSrc(path));
      return newPath;
  }