I am trying to display images from my ionic app in in a similar fashion to the below:-
<ion-header>
<ion-navbar>
<ion-title>Blah/ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div id="image">
</div>
</ion-content>
and in my typescript file, I write the following:-
LoadImage(hash, id){
document.getElementById("image").innerHTML = '<img src="'+ img_URL + '" />';
}
However, using this method ends up with the image link being broken, and in debugging with js, a 403 error pops up. what is the correct method to display an image from an external source?
Thanks in advance.
Let's try a more angular way of approaching this instead of the document.getElementById
<ion-content padding>
<div [innerHtml]="myImage">
</div>
</ion-content>
And then
public myImage: string;
// assume the parameters are neccessary in real code but not for MCVE
loadImage() {
this.myImage = '<img src="'+ img_url + '"/>';
}
Pluker: http://plnkr.co/edit/WBeRRJyYucLwvckjh5W7?p=preview
So, sadly, after taking a look at one of your images, the response was
"The owner of this site does not allow hotlinking"
Which means that this image cannot be embedded.
This is happening because of the automatic sanitization of the URLs by angular.
you can read about it here : https://angular.io/api/platform-browser/DomSanitizer
this is already answered in
Angular 2 disable sanitize
Related
I'm trying to set a background image in my template email, but without attachement.
I've tried to upload the image in the server, it works fine but to view the email it needs to click for downloading it.
I've tried this :
<div style="background-image: url({{asset('logo.jpg')}})">
and this :
<div style="background-image: url('{{ email.image('#img/logo.jpg') }}')">
Thanks.
I think the problem is that you need an absolute URL (starting with http://your.domain.com/etc) for the image to work inside the email:
<div style="background-image: url({{ absolute_url(asset('logo.jpg')) }})">
I'm trying to display my fetched remote data, from IonicPage to template view using ng-repeat.
How to display my fetched remote data into ionic html view?
Running Ionic-4.
I’ve tried to log fetched remote data, web call is ok. It seems template-view load before fetched-remote-data.
1 - Following method load data
public onLoadData(){
this.http.get(this.cfg.fetchPlatformUrl()).subscribe((data: any) => {
this.remoteData = data;
});
}
2 - Following method get data from IonicPage variable
public getRemoteExerciseData(){
return this.exerciseVideos;
}
3 - its template view code does not listing as i expected.
<ion-list>
<ion-list-header>
<ion-label>
<b>Exercise List</b></i>
</ion-label>
</ion-list-header>
<!-- START - ISSUE IDENTIFIER -->
<ion-item ng-repeat="ex in getRemoteExerciseData()">
Video 1
<ion-chip color="success">
<ion-label>V</ion-label>
<ion-icon name="happy" color="success"></ion-icon>
</ion-chip>
<ion-chip color="danger">
<ion-label>X</ion-label>
<ion-icon name="sad" color="danger"></ion-icon>
</ion-chip>
</ion-item>
<!-- END - ISSUE IDENTIFIER -->
</ion-list>
I expect see the list of fetched remote data, but the actual template view show only one.
Exercise List
<!-- START - ISSUE IDENTIFIER -->
<ion-item *ngFor="ex in getRemoteExerciseData()">
Video 1
<ion-chip color="success">
<ion-label>V</ion-label>
<ion-icon name="happy" color="success"></ion-icon>
</ion-chip>
<ion-chip color="danger">
<ion-label>X</ion-label>
<ion-icon name="sad" color="danger"></ion-icon>
</ion-chip>
</ion-item>
<!-- END - ISSUE IDENTIFIER -->
For latests Angular versions, you should use ngFor
I have a simple website that is running on a raspberry Pi chriminium in kiosk mode.
The page has two parts;
Page-1.php and Page2.php
Each page has a redirect to the other with a meta tag refresh so it rotates.
I want to remove the white flash that shows between page loads because it really ruins the look of the page.
Can someone suggest a way? I tried adding
<meta http-equiv="Page-Enter" content="blendTrans(Duration=10.0)">
to the headers but the white flash is still there.
Thanks in advance.
Got it figured out with Jquery:
function toggle_contents() {
$('#page1').toggle("slow", "linear");
$('#page2').toggle("slow", "linear");
setTimeout(function(){toggle_contents()}, 3000)
}
toggle_contents();
<div id="container">
<div id="page1">This is page 1 contents.</div>
<div id="page2" style="display:none;">This is page 2 contents.</div>
</div>
http://jsfiddle.net/mxwv85px/1/
I use the following code to display a youtube video inside a reveal-box
<a href='#' data-reveal-id='myModal1'><img alt="Some text" src="images/logo.png" class="large-6 medium-6 small-6 columns" /></a>
<div id="myModal1" class="reveal-modal small" data-reveal>
<div class='flex-video'>
<iframe src="http://www.youtube.com/embed/dQw4w9WgXcQ?rel=0" class='no-border' allowfullscreen></iframe>
</div>
<a class="close-reveal-modal">×</a>
</div>
but this works only once...
When I open the box, it shows the video perfectly, but when I close it, and re-open it, I only get a white area.
It seems like the flex-video is the problem; when I remove this div, so I put the iframe directly into the reveal-modal div, it works normally, but then obviously the video doesn't scale on different devices
It always worked fine in foundation 4, but now in foundation 5 it does this.
Please help.
Thank you
Give your reveal modal an ID (i.e. #myModal)
Go into your foundation.reveal.js file and look for the line of code that reads:
close_video : function (e) {
var video = $(this).find('.flex-video'),
iframe = video.find('#myModal iframe');
As you can see, in the third line of code I have added the id of #myModal
Open foundation.min.js and find (command+f) the two iframe references, and add your ID (#myModal) to both
I am having issue with loading Facebook Profile Images in my application. I get list of my friends fromt the graph API and then display the relevant Friend Info and their public profile images
My HTML is as below.
<div id = "profile_picture" style="float:left; width:100px;height: 100px" >
<img src="https://graph.facebook.com/{{providerUserId}}/picture?width=100&height=100"/>
</div>
<div id="user_basic_info" style="float:left;margin-left:14px;">
<div id="name" style="font-size:16px;font-weight:bold;margin-bottom:6px;">{{name}}</div>
<div id="email" style="margin-bottom:6px;width:400px;">{{email}}</div>
<div id="address"></div>
</div>
The {{}} are Mustache templates which get populated via the model.
For some reason the images don't load up in Chrome; but work fine in Chrome Canary, Firefox, Safari.
It doesn't make a difference if I pass in hardcoded userId also.
Any guidance??
Check to see if you have any chrome plugins causing the issue by opening the url in incognito mode, that is assuming you have all the extensions disabled in that mode.
I noticed that the disconnect extension hid the images as you described.