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

Created on 21 Aug 2017 · 8Comments · Source: ionic-team/ionic-cli

_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:

Create new blank project
Install Cordova Camera plugin + add it no app.module.ts
replace home.ts and home.html with versions below!
Run on device without livereload: ionic cordova run ios --device
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#12714_

docs needs investigation

Source

kensodemann

👍5

Most helpful comment

after 4 month, is there any update on this?

steve3d on 23 Jan 2018

👍6

All 8 comments

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

kensodemann on 21 Aug 2017

after 4 month, is there any update on this?

steve3d on 23 Jan 2018

👍6

Any update @kensodemann?

giacomodeliberali on 16 Feb 2018

@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.

imhoffd on 21 Feb 2018

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

shamilovtim on 31 May 2018

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.

imhoffd on 31 May 2018

Any news?