I have image file on device in Android/data/myApp folder called test.jpg. I want to display it in img tag. I've tried every possible path in src attribute but nothing works. I've also tried change src to ng-src or data-ng-src. Nothing works and I am getting desperate.
The image is visible in storage when I look through windows explorer but it doesn't in my app. If I use $cordovaFile.checkFile function, everything looks perfect in the result data. File exists, has nativeURL but still doesn't show in the view.
Anyone had this problem? I've read everything google has to offer in this topic, but still without any progress on this issue. Can someone show me some simple example how to retrive image in Ionic app from device storage? What path should look like? Maybe I have to add some permissions to my config.xml or andorid manifest?
It's my first hybrid App. I don't have much experience in AngularJS/Cordova/Ionic.
I've really stuck. Please help.
Ok, so I guess I have to answer this question myself. Everything works fine now when I use nativeURL of the file as src. I've added img-src: *; to the content of http-equiv="Content-Security-Policy" meta tag in index but it still didn't work. After 10th time restarting app suddenly everything was fine. I still don't know if this was problem with meta tag but it work now so I am happy.
If anyone want to see my config.xml, manifest or index just ask.
Related
I have checked out the forum a lot and there are many similar question to this, but none have the answer what I am looking for so hope someone can help me!
I am building an app with phonegap and it have previously worked fine. Now it was time for an update of just some text and images in it, but also decided to get the newest version of everything.
I can launch my app on android just fine, but as soon as I click on a link to another page (internal) I get the following error:
net::ERR_FILE_NOT_FOUND(file:///android_asset/www/html/feriehus.html)
It used to work with the following code in the index.html, but does not anymore...does anybody know why?
<li><img src="img\feriehus.png" width="40"></li>
Kind regards, Kiam
Edit: Added images to show their location:
the root of www folder where index.html is located
The location of ferirhus.html is located
Change folder name from html to some other name. Because html is a reserved word so it might be creating problem.
I am trying to build my angularjs app into an android app using PhoneGap Build, but got stucked with the issue of the src of ng-include.
The code below tries to render a html of subheader into the view. It works perfectly in chrome browser, however after I convert the code with phonegap, it does not work. I also tried other path like '../templates/subheader.html' and '/templates/subheader.html', none of them work.
<div class="bar bar-subheader bar-stable" ng-include="'templates/subheader.html'">
</div>
Any suggestions?
It is embarrassing to always answer my own question...
However I finally figured it out.
1. The path inside the ng-include should not have the "/" on its left most.
2. The key of this issue is not the ng-include. It is because I was trying to fetch a variable stored in the $cookieStore:
For some reason I don't know, the data stored in $cookieStore can't persist between page transition. It impact many components in my page. So I have to change the $cookieStore to another local storage service https://github.com/grevory/angular-local-storage.
I had the same problem, that my include was not shown on the device.
But my problem was that I put the template in an folder which's name started with an underscore _.
This is ignored in the build-process. Renaming the folder helped!
Did you have a chance to look at Ionic Framework ? It works on phonegap and has build in AngularJS support. It also has some mobile ready components.
I am developing android phonegap application. which has around 65 images (~10kb size for each). My application is working as expected on Ripple chrome plugin as well as on Chrome and FF browser. but when I load it on emulator some images are not able to load.
I have attached screenshot for the reference.
I tried using the jQuery preload plugin but no luck.
Can anyone help me please! Thanks
EDIT:
I have tried the same code without any change on iPhone and WindowsPhone7, Images are showing up fine on both the platform.
Try creating an identical copy of the image (../image_copy1.png, for example), and swap that code out in lieu of the image location that isn't working.
Sometimes emulator programs freak out with file paths either due to localized caching of data or actual logistical errors in the emulator program itself. Dreamweaver has similar problems, as do a host of other dev/testing suites - local caching of images is not an uncommon problem. You can circumvent this issue sometimes by uploading a copy of the desired file (but not copying it within the program itself) - causing a fresh, noncached upload of it. This is by no means a "proper" solution, but it's a quick and dirty workaround for a buggy emu/dev program.
If you are loading the images from an external source, you may need to 'whitelist' the source. Did you add the domain name into the Cordova config file? It is under res/xml/config.xml
<access origin="www.example.com" />
I know that it is necessary for cross domain AJAX requests but not sure for images, you could give it a try.
Can't help much.
Emulator acts cranky some times.
I have faced the issue multiple times.
At the best, you can try creating another avd-image... but at least I cannot guaranttee that it will work.
I found a very strange and anoying bug.
Im developing in Eclipse, i use several images for my app.
Sometimes when i import a new image to the project and use it somewhere in my app, after the test run all the images are went to another places... Its like every image has changed their resource ID and they are all moved to another places... background loads for buttons, button image loads for scrollbars.. etc... every image is bugged and appear in random places!
Nothing can solve this bug, except deleting my app manually, then run again.
I work on my phone, not Emulator.
It is really annoying, i dont want in the future that when im updating in market, the users will get a messed up app...
Anybody know something about this?
That's probably because the R.java is messed up.. try to do Project->Clean and see if that solves the problem
If you are importing any image make sure that the name of the images in not in Capital letter and also its name doesn't start with any numeric value. Otherwise its going to create problem in generating its id in R.java.
I wrote an app which loads datas (text and images) from a MYSQL DB from a webserver. In the emulator the program works fine. Then I tried it with my native device HTC in the 'debug as' modus. Still fine. But when I unplug the device and run it standalone the images are not being loaded anymore.
The 'funny' thing is, that I have one image called 'default.jpg' it is in the same folder as all the other images which are called like 'AB-123_1.jpg. The 'default.jpg' is the only image which loads also in the 'standalone' modus. I also gave it a try with renaming the images to some simple names like blabla.jpg. But it did not helped.
It's my first app, so maybe I just missed something.
The only real suggestions I can make are:
Pop up an alert in the catch poriton of your exception handling
Look into using traceview - not sure if it will help here, as I've only ever used it for profiling
According to Redirect Log output to sdcard on customer's phone, the app Catalog may be of some use (not tried it)
Try doing a clean build and uninstalling your app from the phone first, just in case of weirdness with code not rebuilding properly
Just to rule out the obvious (which should break debug builds anyway), but did you specify
<uses-permission android:name="android.permission.INTERNET"/>
in the AndroidManifest.xml?
Hope this helps,
Phil Lello