I want to display image on web browser, the image file returns from api response. if we want to display image in device then we can download it, store it in device memory and we can display it. but how can we display image in web browser? is there any way to download and store image in browser?
what i have tried is below...
this.sProvider.getLogo(this.logoHeaders)
.then(result => {
console.log("getLogo " + JSON.stringify(result));
this.img = result._body;
});
html
<div>
<img src="{{img}}" >
</div>
You need to use [] to bind src for <img> tag :
<img [src]="img" />
Try it.
<img [src]="img" >
If it is not works kindly send What do you get result here?
this.img = result._body;
Related
Repro steps -
1- Create a basic task pane apps for Office for word
2 - use following HTML
<script type="text/javascript">
function GetFileURL() {
console.log("Url = "+Office.context.document.url);
document.getElementById("urlLabel").innerHTML = Office.context.document.url;
}
function Reset() {
document.getElementById("urlLabel").innerHTML = "";
}
</script>
</head>
<body class="ms-font-l ms-landing-page">
<input id="btn1" type="button" onclick="GetFileURL()" value="Get File URL "></input><br>
<input id="btn2" type="button" onclick="Reset()" value="Reset"></input><br>
<p id="urlLabel">File Url Displayed here</p>
<!--</div>-->
</div>
</body>
</html>
3- Use the following code on a button click to get a URL name visible at the top
function GetFileURL() {
console.log("Url = " + Office.context.document.url);
document.getElementById("urlLabel").innerHTML = Office.context.document.url;
}
4- Load the Office app in Word online document
5- Edit in Word Online
6- The document name is visible at the top in form of the title
example - Sample -Saved
7- If you click and get the URL (document name) as visible
Now if you change the name directly in the title bar, and then click on the add-in button, you still see the old URL
If you reload the document, then and load the add-in again, then you see the correct updated URL.
I am trying to understand if there is a way by which we can get hold of the new document name immediately without the need to reload the document.
Any pointers on this behavior will really help us move forward
Found the answer to this - we need to use
https://dev.office.com/reference/add-ins/shared/document.getfilepropertiesasync
I have an issue getting content inside the projectpages. (I literally tried to figure this out for 4 days now, searching the web - i will give my right arm for solving this)
So I have a simple index.html page with 7 projects (7 thumb images representing each portfolio project). When i click on one of the images i would like to get to the page showing its content - i get to the new page /#/WORK1/ but i can't figure out where/how to insert my content in this new url?
You can see the problem at my site here:
awesth.dk
Here is the code i am using for the 7 projects. WORK1, WORK2 etc.
<div id="projectPages">
<div class="project page-project" data-url="/WORK1/" >
<!-- Will be fetched on-demand -->
</div>
...
(So I don't know how I get it to be "fetched on-demand")
And here is the 7 clickable thumbs:
<div id="projectThumbs" >
<div class="wrapper">
<a class="project "href="/WORK1/" >
<div>
<div class="project-image"><div class="intrinsic"><div class="content-fill"><img data-src="/img/upcoming.png" data-image="/img/upcoming.png" data-image-dimensions="2500x1401" data-image-focal-point="0.5,0.5" alt="work" data-load="false"/><noscript><img src="/img/upcoming.png"></noscript></div></div><div class="project-item-count">0</div></div>
<div class="project-title">Titel1</div>
</div>
</a>
...
Pleaaase help
You need to use write some JavaScript code using JQuery.
There are methods you need:
click() – to add click event handler.
data() – to get value from data attribute.
load() – to load contents from some URL to some element.
UPD
There is an example of using these methods. Does it fit your case?
https://jsfiddle.net/up495fzs/
UPD2
You need to update your HTML code on the server.
Pay attention to data-project-id="1" and id="project-id-1". And update numbers respectively.
In data-url set your relative path. If you want to load WORK1.html file, you should write: data-url='/WORK1.html' (without / at the end).
UPD3
The connection between blocks are made by data-project-id="1" and id="project-id-1" attributes.
I change the way to get url. I leave it in <a href="..."> and removed from <div class="project page-project">.
https://jsfiddle.net/up495fzs/6/
But for now I realised that I don't understand why you need many <div class="project page-project"> elements. Why not to use just one?
https://jsfiddle.net/up495fzs/5/
UPD4
And you need to know about CORS (Cross-origin resource sharing) – https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
You could load contents just from your web site. It'll fail if you will try to load page from external web site.
UPD4
You could use history.pushState(null, null, link.href); to update the URL of the page.
http://diveintohtml5.info/history.html
Updated JSFiddle:
https://jsfiddle.net/up495fzs/8/
You won't see URL changes at JSFiddle because it runs in a frame.
Try it on your page.
UPD5
Add link to JQuery library to the <head> of your page but before my script.
Add my script wrapped with $(function() { /* JS code */ }); to execute it properly.
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
...
<script>
$(function() {
/* JS code from JSFiddle */
});
</script>
I took the sample HTML5 and tried in iOS Safari.
The sample photo appears but keeps loading continuously and no Aviary editing actions can be performed.
Does anybody have a solution?
Here's the sample code directly from the Aviary site at http://www.aviary.com/web-documentation
<!-- Load Feather code -->
<script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>
<!-- Instantiate Feather -->
<script type="text/javascript">
var featherEditor = new Aviary.Feather({
apiKey: '12345678',
apiVersion: 2,
tools: 'all',
appendTo: 'injection_site',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
<div id="injection_site"></div>
<img id="image1" src="http://images.aviary.com/imagesv5/feather_default.jpg"/>
<!-- Add an edit button, passing the HTML id of the image and the public URL ot the image -->
<p><input type="image" src="http://advanced.aviary.com/images/feather/edit-photo.png" value="Edit photo" onclick="return launchEditor('image1', 'http://images.aviary.com/imagesv5/feather_default.jpg');" /></p>
I contacted Aviary at api#aviary.com and they mentioned that there was a bug that they fixed today. It works now.
You have to put this code on live server, local does't seem to work here. Aviary web documentation says that "Set a location on your server for Aviary to send a server-to-server HTTP POST".
Just in case...
You must add the complete 'src' in the photo.
Instead us using "src='/upload/miPhoto.png'" you must use "src='http://localhost:8080/project/upload/miPhoto.png'"
Hope this helps!
This is my first question asked, so if I leave out details please be a little lenient. Thanks!
I am using the Facebook Like Button plugin on my site (tried both HTML5 version and xfbml version). I have included all necessary tags and scripts for xfbml and HTML5 support. I have followed the "spec" and done a thorough amount of searching here and elsewhere to the problem:
The like button functions correctly, except that the flyout/popup that is supposed to show after clicking the button doesn't load. I mean load, not show (and yes I already checked for overflow:hidden issues per the spec). The new <span> (which includes the <iframe>) are added to the DOM immediately after the like button <span>, and they load all of the code that is supposed to be there:
<span class=" fb_edge_comment_widget fb_iframe_widget " style="top: 19px; left: 0px; z-index: 10000;">
<span>
<iframe id="fa02aa64d8da" class="fb_ltr" scrolling="no" name="fee6eb9f6f2768" style="border: medium none; overflow: hidden; height: 225px; width: 401px;" src="http://www.facebook.com/plugins/comment_widget_shell.php?api_key=233493930007947&locale=en_US&master_frame_name=fa12240bc73214&sdk=joey">
<html>
<head>
<body onload="onPageLoad()">
<script>
var onPageLoad = function() {
document.domain = 'facebook.com';
var loc = window.location.toString();
var index = loc.indexOf('?');
var qs = loc.substring(index + 1);
var params = qs.split('&');
var master_frame_name = '';
for (var i in params) {
var components = params[i].split('=');
if (components[0] == 'master_frame_name') {
master_frame_name = components[1];
break;
}
}
try {
var master_frame = parent.frames[master_frame_name];
master_frame.ExternalNodeConnectWidget.onCommentWidgetLoaded(document);
} catch (e) {}
};
</script>
</body>
</html>
</iframe>
</span>
</span>
Now after that <span> is loaded it is supposed to fire the script function onPageLoad which should load all of the data into the <iframe>. Instead I get a bunch of errors:
There is the infamous Unsafe Javascript attempt to access frame with URL
When you manually run the onPageLoad() function (in hopes of it loading the content into the iframe) in the console/Firebug, you get
(in Chrome 15)
Error: SECURITY_ERR: DOM Exception 18
code: 18
message: "SECURITY_ERR: DOM Exception 18"
name: "SECURITY_ERR"
__proto__: DOMException
(in Firefox 7)
Error: Illegal document.domain value
document.domain = 'facebook.com';
I presume this has to do with cross-domain requests, but it seems like for other people, they just get the error but the popup still loads properly. Any ideas how to get this to work?
This is a known Facebook bug: http://developers.facebook.com/bugs/293075054049400
Basically, one gets this behavior if secure browsing is enabled on the Facebook user's account.
If you have secure browsing disabled (as it is default) here is another possible solution:
You cannot use localhost in the og:url since Facebook cannot surf that page to get the data. So when developing, enter the live site URL in og:url, og:image, the like/share button url etc. Even that might not help, the click needs to be made on the live site, when I deployed it worked fine.
Anyone know a work around for this to make it easier when developing locally?
<div>
<img src='http://graph.facebook.com/<?php $user->id ?>/picture'/>;
</div>
this is the code that i m using to get a facebook profile pic in div ,this div tag is running in java script ,when i run this code in chrome it works well,but in firefox it get blink and then image comes,pls help anybody thanks in advance
You need to show us more code, also you need to echo the user id:
<img src='http://graph.facebook.com/<?php echo $user->id ?>/picture' alt='' />