Image in <img>-tag not shown if livereload is enabled

[kensodemann]

From @big-r81 on August 21, 2017 15:12

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

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

App is running on device

(livereload enabled: ionic cordova run ios --device --livereload)
Taking a picture with Cordova (destinationType = FILE_URI) and using this file path as
src in an image tag, the picture is not shown in the UI.

(livereload disabled: ionic cordova run ios --device)
Taking a picture with Cordova (destinationType = FILE_URI) and using this file path as
src in an image tag, the picture is shown in the UI.

Expected behavior:

The picture should be shown regardless of whether livereload is enabled or diesabled.

Steps to reproduce:

1. Create new blank project
2. Install Cordova Camera plugin + add it no app.module.ts
3. replace home.ts and home.html with versions below!
4. Run on device without livereload: ionic cordova run ios --device
5. Run on device with livereload: ionic cordova run ios --device --livereload

Related code:
home.ts

import { Component } from '@angular/core';
import { Camera, CameraOptions } from "@ionic-native/camera";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  imageUrl: string = '';

  constructor(public camera: Camera) {}

  onTakePhoto() {
    const options: CameraOptions = {
      quality: 100,
      correctOrientation: true
    };
    this.camera.getPicture(options).then((imageData) => {
      console.log("FILE: " + imageData);
        this.imageUrl = imageData;
    }, (err) => {
      console.log(err);
    });
  }
}

home.html:

<ion-header>

  <ion-navbar>
    <ion-title>home</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col text-center>
        <h5>Take a Photo!</h5>
      </ion-col>
    </ion-row>
    <ion-row *ngIf="imageUrl != ''">
      <ion-col>
        <img [src]="imageUrl">
      </ion-col>
    </ion-row>
    <ion-row>
      <button
        ion-button
        block
        outline
        type="button"
        icon-left
        (click)="onTakePhoto()">
        <ion-icon name="camera">
          Open Camera
        </ion-icon>
      </button>
    </ion-row>
  </ion-grid>
</ion-content>

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    ios-deploy : 1.9.1 
    Node       : v8.1.3
    npm        : 5.3.0 
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 

Copied from original issue: ionic-team/ionic-framework#12714

[kensodemann]

Hello! Thank you for opening an issue with us!

Given that the code works without --livereload, this appears to possibly be an issue with the CLI rather than an issue with the Ionic Framework itself. I will move this issue to ionic-team/ionic-cli. Please track the issue there for further updates.

Thank you for using Ionic

[steve3d]

after 4 month, is there any update on this?

[giacomodeliberali]

Any update @kensodemann?

[imhoffd]

@big-r81 @steve3d @giacomodeliberali Loading File URIs while using the livereload dev server is not possible. The webview won't load it due to security reasons.

It works without live reload because the files are transferred to the device and then the file:// protocol is used.

[shamilovtim]

This is still a problem fellas @kensodemann

Lost quite a few hours on this today only to find out that it was livereload causing the bug

[imhoffd]

Adding docs label as a reminder to make this clearer in our next revision to our documentation.

There is a lot at play here. If using our webview plugin from the starters, I think you'll run into the same issue even without livereload on iOS. The plugin serves the app in a local HTTP server on the device, and due to security reasons, the Web View will not load file:// URLs when being served on http://. It does not use the local HTTP server for Android, although that is changing in this PR to be more consistent and to fix issues with HTML5 routing. For now, the normalizeURL() trick should work.

When livereload is used, suddenly the files are no longer served on the mobile device, but your computer. The Web View loads the dev server from your computer, e.g. http://10.0.0.x:8100, instead of http://localhost:8080, the URL of the local HTTP server in the Cordova plugin. Thus it becomes difficult to reference files on the device (from the Camera plugin) from a server on your computer. Livereload is a compromise, unfortunately.

I don't think we've attempted an elegant fix for this other than recommending DATA_URL, which has its own limitations. I will need to investigate if a solution on our end is even possible.

But, yes, we can do a better job documenting the behavior here.

[Shtibel]

Any news?

[imhoffd]

Yes, the docs are here: https://beta.ionicframework.com/docs/building/webview/#file-protocol

Install latest v2 of the Web View plugin: https://github.com/ionic-team/cordova-plugin-ionic-webview

Please use the Ionic Native wrapper: https://beta.ionicframework.com/docs/native/ionic-webview/