i need to preview default image while getting my exact image from a url
here's my code for getting the image
Uri uri = new Uri(myUrl);
Profile.Source = new BitmapImage(uri);
"Profile" is the Image that previews the requested image
You can use two images. The first one will be the placeholder you want, and the second one will be the profile picture that will show up later and cover the first one.
You need these images to be in the same palce, one above the other. You can user Grid to achieve that.
<Grid>
<Image x:Name="Placeholder" Source="/Assets/Placeholder.png" />
<Image x:Name="Profile" ImageOpened="Profile_ImageOpened" />
</Grid>
The Placeholder.png is an image that has been added to the project.
Now, we want to know, when profile picture is download. Event ImageOpened gives us the way. We can use it to hide the placeholder when the profile picture is fully downloaded.
private void Profile_ImageOpened(object sender, RoutedEventArgs e)
{
Placeholder.Visibility = Visibility.Collapsed;
}
Related
I am quite new to Angular. My exact problem statement is -
I want to show a default image. If i click on the image, File selector window should open. When i select an image, i should be able to see and edit the image and finally this image should override the default image and also send this image to an API and display existing profile image if any. I want to do all this using HTML and Angular 4.
Please point me to any link if a solution to this problem already exists.
I have just been able to open the file selector till now by doing this -
<div>
<ion-input type="file" style="display: none" ngModel (change)="getFiles($event)"></ion-input>
<img src="assets/imgs/uploadImage.png" class="form-control" style="width : 20% ; height : 15%" (click)="selectFile()">
</div>
and
selectFile(): void {
let element: HTMLElement = document.querySelector('input[type="file"]') as HTMLElement;
element.click();
}
public async getFiles(event) {
console.log(event.target.files);
}
To show the profile image again, it's depend on how is the api server store your image? what is the format in that api server send an image to you, binary, cloud url...?
But for choose file and send it to server you can take a look this post...
https://www.academind.com/learn/angular/snippets/angular-image-upload-made-easy/
I am developing a windows phone 8 application. In my application i am using a WebBrowser control to show the HTML formatted string. I need to show the html formatted text with black background. I am doing it successfully but the Problem is that
when the html formatted string is rendered in WebBrowser it first shows the White color and then shows the actual string with black background. It looks like flick effect and then shows my html formatted string.
Code I am Using is:
string html = ("<!DOCTYPE html5><html><head><meta name=\"viewport\" content=\"user-scalable=no background-color:black\" />" + sctipy + "</head><body style= \"background:#000; color:#fff;\"><div id=\"content\">" + myHtmlFormattedString + "</div></body>" + "</html>");
webbrowser.NavigateToString(html);
Is there any other solution like changing the default background of WebBrowser control to other than white
The problem is that you can't change the background of the WebBrowserControl itself.
I had the same problem... I solved it by making the WebBrowserControl collapsed and when the LoadCompleted of the WebBrowserControl hits, make it visible...
XAML:
<phone:WebBrowser x:Name="browser" IsScriptEnabled="True" Visibility="Collapsed" LoadCompleted="WebBrowser_LoadCompleted" />
And on the back:
public void WebBrowser_LoadCompleted(object sender, EventArgs e);
{
browser.Visibility = Visibility.Visible;
}
This gives you also the advantage to show a ProgressBar/ProgressRing when you are loading a (huge) page and hide until the WebBrowser_LoadCompleted gets triggered. As you are loading a small page, you won't see the difference of the visible/collapsed part and your flickering problem is gone...
In my windows phone 8 application, i have one image view, by default it is set to local static image.
<Image x:Name="advImage" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Images/banner.jpg" Stretch="Fill" Margin="0,0,0,0"/>
Now after loading the page, I want to get the original image from the server and should be replace the above static image. This task should be done in background via thread so that the user interface should not be blocked. I don't want to display any progress bar while downloading the image.
I'm new to windows phone 8. Please provide your solutions to the problem.
Thanks.
You need too use databinding(binding)
<Image x:Name="advImage" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Source="'Binding Image,mode=twoway" Stretch="Fill" Margin="0,0,0,0"/>
private string _image;
public string Image{
get
{
return m_IconPath;
}
set
{
_IconPath = value;
PropertyChanged ("IconPath");
}
}
Now when your user is connected get your server image and set the property Image.
In my code I have defined the following:
<s:Image id="test" x="50" y="50" width="30" height="30" click="onClick_clickHandler(event)" smooth="true" smoothingQuality="high" source="#Embed('icons/myImage_60_off.png')"/>
What I want is to be able to change the source of the image every time the user clicks on the image - similar to the way favourites work on a browser.
I have no idea how to change the source of the image from my code.
Thank you
I had a hidden datagrid with my solution, because it started off with a visible one.
The image looked like this:
<mx:Image top="153" left="10" right="10" bottom="5" source="{dgpick.selectedItem.ImageFile}" />
Every time someone clicks on the image, I would increase the selected index of the datagrid, and the labels will display the corresponding data, as they are also bound to its data.
The image can also have a link to an XML file that you can load like this:
<s:HTTPService id="Config"
url="config.xml"
result="resultHandler(event)"/>
private function resultHandler(event:ResultEvent):void
{
ImagesURL = event.result.images.ImagesURL[iCounter];
}
Every time someone clicks on the image, you can increase the counter, and so forth.
Hope this gives you some ideas.
There are 20 ways to do this.
If you need more code, add a comment, with what you need.
I finally did it!
public var image_loader:Loader; // define a new loader
image_loader = new Loader(); // create the new loader at the desired location (in my case in the initialization method of the page
image_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded); //add a listener and a function to assign to the listener
depending on where the command has to be executed
image_loader.load(new URLRequest('location of the image')); //this will load the image dynamically
function imageLoaded(event:Event):void {image_Id.source = image_loader;} //where image_Id is the id of the s:Image tag to be modified
also, I had to remove the source from the s:Image tag previously posted
The rest is just logic of the way the application needs to implement the functionality, so it's pretty much left to the developer's desires
Is there a way to control the load order of images on a web page? I was thinking of trying to simulate a preloader by first loading a light-weight 'LOADING' graphic. Any ideas?
Thanks
Use Javascript, and populate the image src properties later. The # tells the browser to link to a URL on the page, so no request will be sent to the server. (If the src property was empty, a request is still made to the server - not great.)
Assemble an array of image addresses, and recurse through it, loading your images and calling a recursive function when the onload or onerror method for each image returns a value.
HTML:
<img src='#' id='img0' alt='[]' />
<img src='#' id='img1' alt='[]' />
<img src='#' id='img2' alt='[]' />
JS:
var imgAddresses = ['img1.png','img2.jpg','img3.gif'];
function loadImage(counter) {
// Break out if no more images
if (counter==imgAddresses.length) { return; }
// Grab an image obj
var I = document.getElementById("img"+counter);
// Monitor load or error events, moving on to next image in either case
I.onload = I.onerror = function() { loadImage(counter+1); }
//Change source (then wait for event)
I.src = imgAddresses[counter];
}
loadImage(0);
You could even play around with a document.getElementsByTagName("IMG").
By the way, if you need a loading image, this is a good place to start.
EDIT
To avoid multiple requests to the server, you could use almost the same method, only don't insert image elements until you're ready to load them. Have a <span> container waiting for each image. Then, loop through, get the span object, and dynamically insert the image tag:
var img = document.createElement("IMG");
document.getElementById('mySpan').appendChild(img);
img.src = ...
Then the image request is made only once, when the element is created.
I think this article https://varvy.com/pagespeed/defer-images.html gives a very good and simple solution. Notice the part which explains how to create "empty" <img> tags with:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">
to avoid <img src="">
To display a loading image, just put it in the HTML and change it later at the appropriate moment/event.
Just include the 'loading' image before any other images. usually they are included at the very top of the page and then when the page loading completes, they are hidden by a JS.
Here's a small jQuery plugin that does this for you: https://github.com/AlexandreKilian/imageorder