CODEWITHSUNDEEP
htmltypescriptionic-framework
peachykeen
peachykeen

Reputation: 4411

Recently taken camera image won't display on Ionic page

I am trying to display two images on a page using Ionic. I am taking one photo via a camera, and I am pulling the other image down from the web. I can successfully store the images as a FILE_URI that is something like the following:

Camera:

file:///var/mobile/Containers/Data/Application/2A696490-1D2B-4A22-B058-8F814AF52D90/tmp/cdv_photo_001.jpg

Web:

file:///var/mobile/Containers/Data/Application/2A696490-1D2B-4A22-B058-8F814AF52D90/Documents/file.png

The problem arises when I try to view the files. When I try to set an img HTMLElement's src in typescript via document["img1"].src = this.cameraImageURI; I get an error on my xcode console that is the following:

ERROR: Unable to send exception to server [object Object]

My page never even loads because of this error. I believe my issue may be with passing the entire string (as shared above) into the img1 src attribute.

I have looked into Ionic's FileOpener class, but I am not sure if that is the way to go.

UPDATE 1: I tried slicing out the file://, but unfortunately, that didn't work. Also, I tried using their function, normalizeURL, which should solve the issue too. The documentation for this is found here. But alas, it makes the string: 

http://localhost:8080/var/mobile/Containers/Data/Application‌​/17737D0A-F9C2-4DD9-‌​8A9B-4DA6A094D100/tm‌​p/cdv_photo_001.jpg

which didn't work either.

Upvotes: 0

Views: 530

Answers (1)

David Dal Busco
David Dal Busco

Reputation: 8652

As discussed in the comments above, firstly we figured out that the first problem was linked with WkWebView not supporting URI containing file://.

To remove it, Ionic provide an handy util method which could be use as follow:

import { normalizeURL } from 'ionic-angular';

this.cameraImageURI = normalizeURL(this.cameraImageURI);

Dokumentation could be found at https://ionicframework.com/docs/wkwebview/ see topic "Rewriting file://

Secondly I thought that OP might had a problem with setting the URI result with document. I suggested to access the URI from the page template as following and luckily it worked out ;)

<div *ngIf="cameraImageURI != null">
  <img [src]="cameraImageURI">
</div>

Note: Doing so, the image will be only rendered if the URI isn't empty. Furthermore, cameraImageURI has to be a public variable of the class/view

Upvotes: 1

Related Questions