Img ng-src issue

ionic-v1
1

I’m using https://github.com/apache/cordova-plugin-camera to take a photo and https://github.com/apache/cordova-plugin-file-transfer to upload it to a folder on my server. Works great, nothing special.

But for a few reasons I’m considering storing my Ionic app elements on my own server (pointing Xcode to the URL instead of the local address). In testing everything still works great except that I can’t get the photo preview to load in my template’s img ng-src like it normally does after snapping a photo.

At first I thought server configuration like CORS or something and tried things like this in htaccess without a change:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"

Then I thought perhaps something with $sce and for example tried things like this with the camera result:

$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
}
$scope.myPhoto = { src: FILE_URI };

and then:

<img ng-src="{{trustSrc(myPhoto.src)}}" style="width: 100%; height: auto; overflow: scroll;">

Of course works fine when I do a normal ionic build but if I run the very same with Ionic on the server I still get no image preview. Before my server tests I was just doing:

$scope.myPhoto = FILE_URI;

and

<img ng-src={{myPhoto}} style="width: 100%; height: auto; overflow: scroll;">

Again works great when everything is local but when that didn’t load the photo preview with Ionic living on the server I started to experiment.

Just to be clear, the photo is still being taken and I can still use my method for naming and uploading the picture without any issue, I just can’t see the preview of the image. The only issue is that the result from the camera doesn’t load in ng-src to preview the image if the Ionic resources are on the server instead of local, even though I can still do whatever else I want with the image.

Does anybody think they know why? I’m pretty new to Angular and Ionic so perhaps this one is obvious to someone who’s been in this realm for a while. I really need a new perspective! Anyone have thoughts?

2

So you have your app on a remote server and are just pointing cordova to there?
So there’s the problem.

While they code may still work, it doesn’t have the same reference for a file system as if the code was stored on a device.

So while you can take a photo and use the native functionality, the reference to the devices file system is not there. In short, you have no access to the devices native file system.

You should store the actual code on the device instead.

3

Thanks. I solved by putting only a few resources on the server and keeping everything else on the device. Seems to solve everything in the sense that I gain the added flexibility I was looking for and maintain access to the device’s file system.

For example in my last test I put app.js, controller.js, and my templates folder on the server but left everything else on the device. I also rearranged my index so that the camera template is inline and created controller2.js for it’s functionality (both index and controller2 are on the device).