Ionic 3.3.0 iOS Problems displaying <img> drawings from the camera

[jgw96]

From @aspidvip on May 30, 2017 5:30

Ionic version: (check one with "x") [ ] 1.x (For Ionic 1.x issues, please use https://github.com/driftyco/ionic-v1) [ ] 2.x [ x ] 3.3.0

Related code:

foto.html

<ion-content>
  <div *ngIf="base64Image.length>0">
<div *ngFor="let img of base64Image">
<img (press)="DelFoto(img)" style="width:100%; height: 100%;" [src]="img.src_full"/>
</div>
</div>
</ion-content>

foto.ts

      options = {
            quality: 50,
            destinationType: this.camera.DestinationType.DATA_URL,
            sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE,
            allowEdit: true,
            targetWidth: 1000,
            targetHeight: 1000,
            correctOrientation: true
        }
      }

 this.camera.getPicture(options).then((imageData) => {
     setTimeout(()=>{
       this.base64Image.push({
         id: null,
         procent: 0,
         src_full: 'data:image/jpeg;base64,' + imageData
       });
     },500);
}, (err) => {
});

Other information: Ios When adding new photos from the camera, or selecting from a photo album, the <img> tag does not show photos. On Android shows well.

If you download a picture from the Internet, the <img> tag will show it, but does not show it from the camera.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below): Cordova CLI: 7.0.1 Ionic Framework Version: 3.3.0 Ionic CLI Version: 2.2.3 Ionic App Lib Version: 2.2.1 Ionic App Scripts Version: 1.3.7 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 8 Node Version: v6.10.3 Xcode version: Not installed

Copied from original issue: ionic-team/ionic#11854

[jgw96]

From @AmitMY on May 30, 2017 10:15

I think it will be better if you open this issue with ionic-native, as it is the camera plugin that is problematic.

I just tested in my app, in which I have something like yours, on iOS, but only with sourceType, destinationType, and encodingType set (exactly the same values as yours), and it does show that image. So I recommend to also try remove all of the other properties just for a test, perhaps one of your properties is causing it on iOS.

[aspidvip]

Did so:

options = {
          destinationType: this.camera.DestinationType.DATA_URL,
          sourceType: this.camera.PictureSourceType.CAMERA,
          encodingType: this.camera.EncodingType.JPEG,
      }

no work, &:

var options = {
          destinationType: this.camera.DestinationType.DATA_URL,
          sourceType: this.camera.PictureSourceType.CAMERA,
          encodingType: this.camera.EncodingType.JPEG,
          mediaType: this.camera.MediaType.PICTURE,
      }

no work, but its work the:

addFotoGoGo(){
  this.base64Image.push({
    src_full: "data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQ......",
    id: null,
    procent: 0
  });
}

Previously, everything worked well, did an update and after that does not work. A photo camera opens, I take a photo, but does not show anything in the <img>, but on the android works

{
    "name": "Test",
    "version": "0.0.0",
    "author": "testov",
    "homepage": "http://test.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.1.2",
        "@angular/compiler": "4.1.2",
        "@angular/compiler-cli": "4.1.2",
        "@angular/core": "4.1.2",
        "@angular/forms": "4.1.2",
        "@angular/http": "4.1.2",
        "@angular/platform-browser": "4.1.2",
        "@angular/platform-browser-dynamic": "4.1.2",
        "@ionic-native/action-sheet": "3.10.2",
        "@ionic-native/background-mode": "3.10.2",
        "@ionic-native/call-number": "3.10.2",
        "@ionic-native/camera": "3.10.2",
        "@ionic-native/core": "3.10.2",
        "@ionic-native/date-picker": "3.10.2",
        "@ionic-native/dialogs": "3.10.2",
        "@ionic-native/email-composer": "3.10.2",
        "@ionic-native/file": "3.10.2",
        "@ionic-native/geolocation": "3.10.2",
        "@ionic-native/google-maps": "^3.10.3",
        "@ionic-native/in-app-browser": "3.10.2",
        "@ionic-native/keyboard": "3.10.2",
        "@ionic-native/launch-navigator": "^3.10.3",
        "@ionic-native/media": "^3.10.2",
        "@ionic-native/native-audio": "3.10.2",
        "@ionic-native/photo-viewer": "3.10.2",
        "@ionic-native/push": "3.10.2",
        "@ionic-native/spinner-dialog": "3.10.2",
        "@ionic-native/splash-screen": "3.10.2",
        "@ionic-native/sqlite": "3.10.2",
        "@ionic-native/status-bar": "3.10.2",
        "@ionic-native/toast": "3.10.2",
        "@ionic-native/transfer": "3.10.2",
        "@ionic-native/vibration": "3.10.2",
        "@ionic/storage": "2.0.1",
        "cordova-android": "^6.2.3",
        "cordova-ios": "4.4.0",
        "cordova-plugin-actionsheet": "~2.3.3",
        "cordova-plugin-calendar": "~4.5.5",
        "cordova-plugin-camera": "2.4.1",
        "cordova-plugin-console": "~1.0.5",
        "cordova-plugin-crosswalk-webview": "~2.2.0",
        "cordova-plugin-datepicker": "~0.9.3",
        "cordova-plugin-device": "~1.1.4",
        "cordova-plugin-dialogs": "~1.3.2",
        "cordova-plugin-file": "~4.3.2",
        "cordova-plugin-file-transfer": "~1.6.2",
        "cordova-plugin-geolocation": "^2.4.3",
        "cordova-plugin-googlemaps": "^1.4.0",
        "cordova-plugin-media": "^3.0.1",
        "cordova-plugin-nativeaudio": "~3.0.8",
        "cordova-plugin-spinner-dialog": "~1.3.1",
        "cordova-plugin-splashscreen": "~4.0.2",
        "cordova-plugin-statusbar": "~2.2.2",
        "cordova-plugin-vibration": "~2.1.4",
        "cordova-plugin-whitelist": "~1.3.1",
        "cordova-plugin-wkwebview-engine": "https://github.com/driftyco/cordova-plugin-wkwebview-engine.git#keyboard-fixes",
        "cordova-plugin-x-toast": "~2.5.2",
        "cordova-sqlite-storage": "~2.0.2",
        "ionic-angular": "3.3.0",
        "ionic-plugin-keyboard": "~2.2.1",
        "ionicons": "3.0.0",
        "ng2-translate": "^5.0.0",
        "phonegap-plugin-push": "^1.10.4",
        "rxjs": "5.1.1",
        "sw-toolbox": "3.4.0",
        "uk.co.workingedge.phonegap.plugin.launchnavigator": "^3.2.2",
        "zone.js": "0.8.11"
    },
    "devDependencies": {
        "@ionic/app-scripts": "1.3.7",
        "typescript": "2.3.3"
    },
    "cordovaPlugins": [
        "com-sarriaroman-photoviewer",
        "call-number",
        "cordova-plugin-email",
        "cordova-plugin-inappbrowser",
        "cordova-plugin-whitelist",
        "cordova-plugin-nativeaudio",
        "cordova-plugin-console",
        "cordova-plugin-statusbar",
        "cordova-plugin-device",
        "cordova-plugin-splashscreen",
        "ionic-plugin-keyboard",
        {
            "locator": "https://github.com/driftyco/cordova-plugin-wkwebview-engine.git#keyboard-fixes",
            "id": "cordova-plugin-wkwebview-engine"
        },
        "cordova-plugin-dialogs",
        "cordova-sqlite-storage",
        "cordova-plugin-x-toast",
        "cordova-plugin-geolocation",
        "cordova-plugin-spinner-dialog",
        "cordova-plugin-file-transfer",
        "cordova-plugin-actionsheet",
        "cordova-plugin-background-mode@0.7.0",
        "cordova-plugin-camera",
        "cordova-plugin-datepicker",
        "cordova-plugin-file",
        "cordova-plugin-vibration",
        "cordova-plugin-media",
        {
            "variables": {
                "SENDER_ID": "1:7XXXXXXXXX4:android:1a4XXXXXXXXX53c"
            },
            "locator": "phonegap-plugin-push"
        },
        "cordova-plugin-crosswalk-webview"
    ],
    "cordovaPlatforms": [],
    "description": "Test",
    "cordova": {
        "platforms": [
            "android",
            "ios"
        ],
        "plugins": {
            "cordova-plugin-camera": {
                "CAMERA_USAGE_DESCRIPTION": "This app uses the camera.",
                "PHOTOLIBRARY_USAGE_DESCRIPTION": "This app uses the PHOTO."
            },
            "cordova-plugin-actionsheet": {},
            "cordova-plugin-calendar": {},
            "cordova-plugin-console": {},
            "cordova-plugin-crosswalk-webview": {
                "XWALK_VERSION": "22+",
                "XWALK_LITEVERSION": "xwalk_core_library_canary:17+",
                "XWALK_COMMANDLINE": "--disable-pull-to-refresh-effect",
                "XWALK_MODE": "embedded",
                "XWALK_MULTIPLEAPK": "true"
            },
            "cordova-plugin-datepicker": {},
            "cordova-plugin-device": {},
            "cordova-plugin-dialogs": {},
            "cordova-plugin-file": {},
            "cordova-plugin-file-transfer": {},
            "cordova-plugin-nativeaudio": {},
            "cordova-plugin-spinner-dialog": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-vibration": {},
            "cordova-plugin-whitelist": {},
            "cordova-plugin-wkwebview-engine": {},
            "cordova-plugin-x-toast": {},
            "cordova-sqlite-storage": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-media": {},
            "cordova-plugin-googlemaps": {
                "API_KEY_FOR_ANDROID": "AIzaSyCXXXXXXXXXXXXXXXXXXXXXXXpcfKeEY",
                "API_KEY_FOR_IOS": "AIzaSyCpHKXXXXXXXXXXXXXXXXXXXXXXXX8GNTkM"
            },
            "cordova-plugin-geolocation": {},
            "uk.co.workingedge.phonegap.plugin.launchnavigator": {},
            "phonegap-plugin-push": {
                "SENDER_ID": "1:7XXXXXXXXX4:android:1a4XXXXXXXXX53c"
            }
        }
    }
}

[aspidvip]

But if you save via the transfer plugin, and transfer to the server, then the image is then loaded normally!

[aspidvip]

foto.html

<ion-content>
<div *ngFor="let img of base64Image">
  ---------------------------------------------------------------
  <label style="font-size: 0.5em;">{{img.src_full}}</label>
  <p></p>
  ---------------------------------------------------------------
</div>
</ion-content>

result:

[aspidvip]

I figured out what's wrong. At some point, the image was locked and I had to do so: foto.html

<div *ngIf="base64Image.length>0">
  <ion-slides pager="true">
      <ion-slide *ngFor="let img of base64Image">
       <img (press)="DelFoto(img)" style="width:100%; height: auto; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.19);" [src]="_DomSanitizer.bypassSecurityTrustUrl(img.src_full)"/>
      </ion-slide>
  </ion-slides>
</div>

foto.ts

..........................
.......................
......................
import {DomSanitizer} from '@angular/platform-browser';

constructor(
 //add DomSanitizer
    public _DomSanitizer: DomSanitizer,
)
...........................................
.........................................

And now everything works. But before this was not. Most likely there have been some changes in the security

[aspidvip]

The problem is solved you can close this topic)))