Display image in WPF using URL link from database

Question

I saved a url in a database like this

~ / Images / questions / drink.png

So when I extract it in my WPF application, I tried to do this:

Image img = new Image(); img.Width = Double.NaN; img.Height = Double.NaN; // string fullFilePath = Path.Combine(@"C:\Users\apr13mpsip\Documents\Visual Studio 2010\Projects\iStellarMobile\iStellarMobile\Images\Questions", lstQuestion[i].ImageURL.Substring(1)); string fullFilePath = @"C:\Users\apr13mpsip\Documents\Visual Studio 2010\Projects\iStellarMobile\iStellarMobile\Images\Questions\drink.png"; BitmapImage bi = new BitmapImage(); bi.BeginInit(); bi.UriSource = new Uri(fullFilePath, UriKind.Relative); bi.EndInit(); img.Source = bi; wrapPanel1.Children.Add(img); 

lstQuestion [i] .ImageURL is the URL I am retrieving from the database. but it will not work ... it does not display anything when I run it, so I tried the full path, manually typing the entire directory, but it still won’t work. What am I misunderstood here?

When I debug it, it shows only Images \ Questions \ drink.png, not the full path

When i use

Path.Combine (@ "C: \ Users \ apr13mpsip \ Documents \ Visual Studio 2010 \ Projects \ iStellarMobile \ iStellarMobile", lstQuestion [I] .ImageURL.Substring (1));

he says that the url cannot be determined, and when I debug it, it reads only as Images \ Questions \ drink.png instead of the full path.

Answer 1

You specify UriKind.Relative while you should use UrlKind.Absolute
Since you are probably loading the full URL from the database, e.g.

http://www.americanlayout.com/wp/wp-content/uploads/2012/08/C-To-Go-300x300.png

While UriKind.Relative will be used for something like

/wp/wp-content/uploads/2012/08/C-To-Go-300x300.png

In any case, the following code works:

 var image = new Image(); var fullFilePath = @"http://www.americanlayout.com/wp/wp-content/uploads/2012/08/C-To-Go-300x300.png"; BitmapImage bitmap = new BitmapImage(); bitmap.BeginInit(); bitmap.UriSource = new Uri(fullFilePath, UriKind.Absolute); bitmap.EndInit(); image.Source = bitmap; wrapPanel1.Children.Add(image); 

No need to set image .Width and Image.Height to Double.Nan

Side note. Although you can certainly load images at runtime like this, it would be better to use WPF Databinding (preferably with something like MVVM)

Basically, you will have a ListBox with a WrapPanel as ItemsPanelTemplate Then set the ItemsSource to your list (lstQuestions).

 <ListBox ItemsSource={Binding lstQuestions}> <ListBox.ItemsPanel> <ItemsPanelTemplate> <WrapPanel/> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.ItemTemplate> <DataTemplate> <Image Source="{Binding Path, Converter={StaticResource MyPathConverter}}"/> </DataTemplate> </ListBox.ItemTemplate> </ListBox> 

You would snap the image to any property that represents the Path and use ValueConverter to normalize the path.

 public class PathConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { string path = value.ToString(); if (path.StartsWith("\\") path = path.Substring(1); return Path.Combine("whateveryourbasepathis", path); } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } } 

Code is just a way to give you an idea of ​​which direction to go. The fact is that you may need to look for WPF data binding, rather than doing this with code.