Showing image in WPF using the URL link from database

Question

i saved the URL in the database like this

~/Images/Questions/drink.png

So when i retrieve 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);

the lstQuestion[i].ImageURL is the URL that i retrieve from database. but it won't work ... it display nothing when i run it , so i tried the full path by typing in manually the whole directory but it still won't work , What have i gone wrong here?

When i debug it , it only shows Images\Questions\drink.png instead of the full path

When i use

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

, it says URL could not be determined and when i debug it , it only read as Images\Questions\drink.png instead of the full path.

You have got the full path, you should use UriKind.Absolute instead of UriKind.Relative — Anand Murali
– Anand Murali, Commented Aug 26, 2013 at 2:45
when i use Absolute it says URL format could not be determined , @Shaharyar i trying to display on a wrappanel by just adding it — user2376998
– user2376998, Commented Aug 26, 2013 at 2:49
The URL does it refer to an image on a web server or the local file system? — TimothyP
– TimothyP, Commented Aug 26, 2013 at 2:49
You make sure the url in the database does not start with "/" if so you remove it using x = x.Substring(1); — TimothyP
– TimothyP, Commented Aug 26, 2013 at 3:09

TimothyP · Accepted Answer · 2013-08-26 03:18:16Z

You are specifying UriKind.Relative while you should be using UrlKind.Absolute
Since you are probably loading a complete url from the database, for example

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

Whereas UriKind.Relative would 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);

There is no need to set image.Width & Image.Height to Double.Nan

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

Basically you'd have a ListBox with a WrapPanel as ItemsPanelTemplate Then set the 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'd bind the image to whatever property represents the Path and use a 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();
    }
}

The code is just a way to give you an idea which direction to go in. The point is you might want to look up WPF databinding as opposed to doing it with code.

Collectives™ on Stack Overflow

Showing image in WPF using the URL link from database

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related