Show photo taken in cordova on div background-image

@appmudar wrote:

Hello friends, I am developing an app in ionic 3, and I came across a problem, as much as I try, I can not display the image I shot using the camera camera in the background-image of a div, you would know to tell me where I am going wrong?

obs: I tried with DATA_URL, FILE_URI and NATIVE_URI

  clickedImagePath : any = '';

  photo() {
    this.empty_photo = '';
    this.clickedImagePath = '';
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      targetHeight: 768
    }
    this.camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64 (DATA_URL):
      let base64image = 'data:image/jpeg;base64,' + imageData;
      this.clickedImagePath = base64image;
    }, (err) => {
      // Handle error
    });
  }

<ion-col class="d-flex justify-content-center align-items-center" [ngStyle]="{'background-image': 'url(' + clickedImagePath + ')'}" style="background-size: cover;background-position: center;background-repeat: no-repeat;">
                <img class="top-image" src="{{empty_photo}}" />
                <div padding class="top-container-inner">
                    <button ion-button icon-only clear navPop class="arrow-button">
                        <img src="assets/imgs/back-black.svg" />
                    </button>
                    <ion-fab bottom right class="camera" (click)="photo()">
                        <button color="danger" ion-fab>
                            <img src="assets/imgs/cam.svg" />
                        </button>
                    </ion-fab>
                </div>
            </ion-col>

Posts: 1

Participants: 1

Read full topic