How to use remote URL for an image?

[Panathas]

Hi, I want to use a remote URL as an Image source. I have tried different things, but noting worked -.-.
My code looks like this:

<Grid Height="500" HorizontalAlignment="Left" Margin="0,0,0,0" Name="grid1" VerticalAlignment="Top" Width="470" Background="{x:Null}">
<Image Height="109" HorizontalAlignment="Left" Margin="240,19,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="180" MaxHeight="50" />
</Grid>

Now I want to add the image source like this:
var imgurl = "http://www.blab/blabla.jpg";
image2.Source = new BitmapImage(new Uri(imgurl));

The problem is, this does not work -.-
Has anyone an idea what is wrong? I'm trying the last two nights, but I can't find the mistake

 

[ccrraaiigg007]

You need to use the webclient to Download the image asynchronously and set the source as the stream you get back.

 

[Red Lemur]

Hi Panathas,

Your code looks fine to me (it should work the way you are doing it). Normally I'd say you should specify the UriKind when specifying the Uri, i.e.:

new Uri(imgurl, UriKind.Absolute)

But it will still probably work without. Some things I would check:

Are you sure some other part of your UI/layout/something else on the page is not interfering with the display of the items? It may be worth you creating a new simple project in visual studio without the app doing anything other than just showing a picture on the page.

Do you definitely have an internet connection? If you are using the emulator to test this are you able to browse to the image using IE on the emulator (just to check the internet connection is working, and nothing is being blocked e.g. by your firewall)?

Where are you putting the code to do this? E.g. Are you sure you are on the same 'thread' as the UI? (you can't update interface elements across threads without some extra code)

One thing that could help you debug - you can get it to call a method if the image load fails which may tell you what the problem is (if you set a breakpoint on the method it calls and examine the exception) - e.g.:

image2.ImageFailed += new EventHandler<ExceptionRoutedEventArgs>(image2_ImageFailed);
image2.Source = new BitmapImage(new Uri(imgurl, UriKind.Absolute));
}

void image2_ImageFailed(object sender, ExceptionRoutedEventArgs e)
{
    // set a breakpoint on this method and examine 'e.ErrorException' if the breakpoint is hit
}

You can also (similarly) get it to call a method when it successfully loads it - which would show you that the image is loading ok, but there is some problem with your user interface (e.g. perhaps your page layout is causing the image to be hidden behind other elements):

image2.ImageOpened += new EventHandler<RoutedEventArgs>(image2_ImageOpened);

Hope that helps, and that you manage to fix it.

Good luck with your app.

Ian

 

[Panathas]

Thank you very much, both
I think I have found the problem with your help. It was not the code, but it is the webpage -.-
When I try a URL from an image of another page it works, but when I try from this page, it does not work. I am not sure why, the URI of the images seem to be ok, e.g. this is one what does not work: http://www.defencenet.gr/defence/images/stories/tragas.jpg

Getting the text of this page is no problem, but images do not work, weird.

Update: When I download a image of the page and set it manually, it works. My code is correct, I have an internet connection. So what is the problem??? Is it possible to download an image using an other way and set it then?

 

[Red Lemur]

Thank you very much, both
I think I have found the problem with your help. It was not the code, but it is the webpage -.-
When I try a URL from an image of another page it works, but when I try from this page, it does not work. I am not sure why, the URI of the images seem to be ok, e.g. this is one what does not work: http://www.defencenet.gr/defence/images/stories/tragas.jpg

Getting the text of this page is no problem, but images do not work, weird.

Update: When I download a image of the page and set it manually, it works. My code is correct, I have an internet connection. So what is the problem??? Is it possible to download an image using an other way and set it then?

Have you tried it with a different image from another site? The server you mention has 'hotlink protection'. What this means is the server will refuse to let you access an image directly - i.e. it will only show images if the request for that image comes from a html file on the same server.

E.g. I might use hotlink protection on my photography site to stop some people directly downloading my photos (without my permission) but they still display when someone loads the web page that uses them.

Hope that explains it.

 

[Panathas]

Yes,thank you so much.This explains everything. How do you find out a server has hotlink protection? My program works for other sites,so it's really the protection. Not so great,but I can live with it

Sent from my Lumia 800 using Board Express

 

[c.zorn]

Can you check the HTTP Response before you attempt to use it and look for '200 OK'?

 

[mckhendry]

Another problem you may need to consider is that some sites will return an HTTP Response of 200 and yet serve up a different image (e.g. an image with the text "hotlinking is not allowed").

To ultimately get around this you may need to first fetch the image remotely and store it on your server (you can do this when you have the ability to set the referrer of the HTTP request), and then have the phone reference it from your server.

Typically, the reasons for pursuing an option like this are shady at best, and apps that have to resort to these options don't exactly have the best success in the marketplace. This is just food for thought. Good luck with your app, I'd be happy to review it if you feel the need.

-kw

 

[Panathas]

Thank you very much. I have switched now to game development, I think this is much more interesting for me and the communtity
But it was interesting to see what problems you have with this kind of problems :-D