I'm trying to load images from http://admin:1234#192.168.8.112/ on my local network
Here are iOS and android screenshots from the emulators respectively
For some reason the images only show up on iOS and not on android.
Here is the relevant typescript code
this.cameras = ["http://admin:1234#192.168.8.112/video1.mjpg","http://admin:1234#192.168.8.112/video2.mjpg","http://admin:1234#192.168.8.112/video3.mjpg" ]
and the relevant html code
<ion-grid>
<ion-row>
<ion-col col-6 col-md-4 col-xl-3 *ngFor="let item of cameras; let id = index">
<div align="center" style="flex-wrap: wrap" class="camera">
<img [src]="item" #imageToView (click)="presentProfileModal(item)" />
<p id="text" text-wrap >Camera {{id + 1}}</p>
</div>
</ion-col>
</ion-row>
</ion-grid>
I've tried using iframes instead of img tags as well as sanitising the URL's with domsanitizer to no avail.
any help or pointers in the right direction would be highly appreciated
Related
I have an ionic 3 app working in production on Android.
Now I just build the iOS version but I have a problem with the assets and some ionic components like ion-input.
For example I expect to see that screens:
But, instead I got these:
I already checked the absolute and relative paths for images but I don't have relative paths.
For example I have this type of paths:
<ion-slide class="third-slide">
<div class="flex-container">
<div class="image-container">
<img class="corner-image" src="/assets/img/corner_plants.png" alt="corner">
<img class="center-image" src="/assets/img/mariposa.png" alt="corner">
</div>
<div class="title-container">
<h1 class="title">
Regístrate para comenzar.
</h1>
</div>
<div class="description-container">
<ion-grid class="description-grid">
<ion-row>
<ion-col col-2 class="nav-button-column">
<button class="previous" (click)="onPreviousButtonClick()">
<img src="/assets/img/icons8-chevron_left.png" alt="next">
</button> </ion-col>
<ion-col col-8 class="description-column">
<p class="description">
Meditar te ayudará a cultivar la paciencia, mejorar tu capacidad de adaptación y liberar tensiones.
</p>
</ion-col>
<ion-col col-2></ion-col>
</ion-row>
</ion-grid>
</div>
<div class="access-buttons-container">
<button class="register-button" ion-button block round (tap)="openCreateAccountPage()">
{{ texts.btn_register }}
</button>
<button class="login-button" (tap)="openLoginOptionsPage()">
{{ texts.btn_login }}
</button>
</div>
</div>
</ion-slide>
And another weird thing is that the ionic components are not showing neither. You can see that the register page has three inputs and in the iPhone they don't appear. And I can't see the background image neither.
I researched about this but I could not find anything, because the most of the people only have problems with relative paths. I don't know what is the problem.
PD: Sorry for using images, but it's the only way I can share that.
Anyone can help me, please?
Thanks in advance.
EDIT:
The app works fine if, for example, I do login with facebook and navigate through it. It connects to firebase and then.. the problem is only that I mentioned.
In browsers works fine too.
My html file contains:
</ion-content>
<ion-content class="card-background-page">
<ion-list>
<ion-card ion-item *ngFor="let item of items" (click)="itemTapped($event,item) ">
<img src="{{item.image}}"/>
<div class="card-title">{{item.title}}</div>
<div class="card-subtitle">{{item.subTitle}}</div>
</ion-card>
</ion-list>
</ion-content>
the controller contains this code:
this.items.push(
{title:"Item 1",subTitle:"one",image:"assets/img/preview_1.png"},
{title:"Item 2",subTitle:"two",image:"assets/img/panorama_2.png"}
)
it works well when running in the browser using ionic serve, but once built for Android (with the Ionic Cloud service) the images don't get displayed on the device.
I tried:
1)./assets/img/panorama_2.png instead of assets/img/panorama_2.png
2)<img src="url({{item.image}})"/> instead of <img src="{{item.image}}"/>
but still nothing
Make sure your assets are inside src/assets/img and not inside www/assets/img
I have a <ion-item> with <a> inside it. I want the apps go to specific href when the <ion-item> is clicked.
The code is working perfectly in browser emulator (ionic serve), but it cant be clicked on the android real device.
This is my <ion-item> :
<ion-item>
<a href="http://google.com">
<img src="img/ionic.png">
<p>Events</p>
</a>
</ion-item>
Note that the above href goes to external html.
The href is working if i try to go to local html :
<ion-item>
<a href="#/jobs">
<img src="img/ionic.png">
<p>Jobs List</p>
</a>
</ion-item>
I have tried change href to ng-href, i also tried specify the href inside the ion-item tag. None of them is working.
I also tried to change the order of the html :
<a href="http://google.com">
<ion-item>
<img src="img/ionic.png">
<p>Forum</p>
</ion-item>
</a>
Its still not working.
Please kindly help me, Thanks for your help
UPDATE
I also tried to use inappbrowser :
<ion-item>
<a href="#"
onclick="window.open('http://google.com', '_system', 'location=yes'); return false;">
<img src="img/ionic.png">
<p>Guide</p>
</a>
</ion-item>
But no luck on the real device
you can install in-app browser plugin in your cordova http://ngcordova.com/docs/plugins/inAppBrowser/
or if you don't want, just use $window.open('http://google.com', '_system'); in your controller
source : http://forum.ionicframework.com/t/linking-to-an-external-url-and-opening-in-browser/30953
I am using ng-show/ng-hide to switch between two different header titles. It works in the browser but does not work in android (4.1) in a cordova app. I also tried using ng-switch and also ng-if, but the same net result.
<ion-modal-view> <<<<< it works OK when not in an $ionicModal
<ion-header-bar>
<h1 class="title" >
<span ng-hide="clipboardMsg">{{title()}}</span>
<span ng-show="clipboardMsg" class="clipboard-msg">{{clipboardMsg}}</span>
</h1>
<button class="button button-clear button-primary" ng-click="close()">Close</button>
</ion-header-bar>
...
Apologies for the cross-post but I will really appreciate some help.
Im building a cordova android app built using jquery,jquery-mobile,html5 etc.
The authorization to my android app is using instagrams oAuth api. I have provided a log out option in my android app, onclicking the logout option the user should get logged out from instagram only from my map, and then get redirect to the "index.html" page of my app. I have tried out to redirect user to log out using `
location.href = "https://instagram.com/accounts/logout/"
but this link redirect the user to the log out of instagram page and shows instagram webpage .
How I can I achieve the following:
1. Log out from instagram account-only from my app, not instagram app.
2. Redirect the user to the index.html page of my app.
Also I have tried all the previously mentioned ideas of the above topic on stackoverflow.
Thanks in advance!
Redirect the user to a html page which will have the following code:
<div role="main" class="ui-content jqm-content">
<iframe style="display: none;" src="https://instagram.com/accounts/logout/" width="0" height="0"></iframe>
<div id = "loading" style="text-align: center; display:block; margin-top: 150px;">
<img alt="" src="/css/themes/images/ajax-loader.gif" width="46px" height="46px">
<br><font style="text-align: center;">Logging Out...</font>
</div>
</div>
then setTimeout() as below:
setTimeout(callIndex,2000);
where callIndex() will redirect to index.html using location.href;
Im making android app using html5, I did the following: Redirect the user to a html5 page containing following code:
<div role="main" class="ui-content jqm-content">
<iframe style="display: none;"
src="https://instagram.com/accounts/logout/" width="0" height="0">
</iframe>
<div id = "loading" style="text-align: center; display:block; margin-top: 150px;">
<img alt="" src="/css/themes/images/ajax-loader.gif" width="46px" height="46px">
<br>
<font style="text-align: center;">Logging Out...</font>
</div>
</div>