使用数据库中的 URL 链接在 WPF 中显示图像答案

【问题标题】：Showing image in WPF using the URL link from database使用数据库中的 URL 链接在 WPF 中显示图像
【发布时间】：2013-08-28 10:52:16
【问题描述】：

我像这样将 URL 保存在数据库中

~/Images/Questions/drink.png

所以当我在我的 WPF 应用程序中检索它时，我尝试这样做：

            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 是我从数据库中检索的 URL。但它不起作用......当我运行它时它什么也不显示，所以我通过手动输入整个目录来尝试完整路径，但它仍然不起作用，我这里出了什么问题？

当我调试它时，它只显示 Images\Questions\drink.png 而不是完整路径

当我使用时

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

，它说 URL 无法确定，当我调试它时，它只读取为 Images\Questions\drink.png 而不是完整路径。

【问题讨论】：

您在哪里显示图像？以及如何？
你已经得到了完整的路径，你应该使用 UriKind.Absolute 而不是 UriKind.Relative
当我使用 Absolute 时，它说 URL 格式无法确定，@Shaharyar 我试图通过添加它来显示在包装面板上
该 URL 是指网络服务器上的图像还是本地文件系统上的图像？
请确保数据库中的 url 不以“/”开头，如果是，请使用 x = x.Substring(1); 将其删除

标签： c# wpf image url path

【解决方案1】：

您正在指定 UriKind.Relative 而您应该使用 UrlKind.Absolute
由于您可能正在从数据库中加载完整的 url，例如

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

而 UriKind.Relative 将用于类似

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

在任何情况下，以下代码都有效：

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);

无需将 image.Width & Image.Height 设置为 Double.Nan

旁注。虽然您当然可以像这样在运行时加载图像，最好使用 WPF 数据绑定（最好使用 MVVM 之类的东西）

基本上你会有一个带有 WrapPanel 作为 ItemsPanelTemplate 的 ListBox 然后将 ItemsSource 设置为您的列表 (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>

您可以将图像绑定到任何代表路径的属性和使用 ValueConverter 来规范化路径。

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();
    }
}

代码只是一种让您了解前进方向的方法。关键是您可能想要查找 WPF 数据绑定，而不是使用代码。

【讨论】：