如何拼接字符串与Binding绑定值作为Image控件的Source属性

你写的这种XAML拼接写法完全不能实现需求。
XAML的属性语法不支持直接在属性赋值字符串里用+拼接绑定表达式，这种写法最终会把localhost:port/"+"{Binding imagePath}整体当成固定字符串解析，既不会执行绑定逻辑，也拼不出正确的图片地址，甚至会因为路径格式非法直接导致图片加载失败。

方案1：ViewModel层拼接（推荐，MVVM模式下最简洁） #

不需要额外写辅助类，直接在绑定对应的ViewModel里新增一个专门返回完整图片地址的属性即可：

// 替换为你实际的本地服务根地址，必须带http/https协议头
private const string ImageBaseUrl = "http://localhost:你的实际端口/";

private string _imagePath;
public string imagePath
{
    get => _imagePath;
    set
    {
        _imagePath = value;
        OnPropertyChanged(nameof(imagePath));
        // 通知界面完整路径属性也发生了变更
        OnPropertyChanged(nameof(FullImageSource));
    }
}

public string FullImageSource
{
    get
    {
        if (string.IsNullOrWhiteSpace(imagePath)) return null;
        return Path.Combine(ImageBaseUrl, imagePath);
    }
}

XAML里直接绑定这个完整路径属性即可：

<Image Source="{Binding FullImageSource}"/>

方案2：使用值转换器拼接 #

如果不想修改ViewModel代码，可以写一个通用的字符串拼接值转换器，在绑定逻辑里完成路径拼接：
首先编写转换器代码：

using System.Globalization;
using System.Windows.Data;

public class RelativeImagePathConverter : IValueConverter
{
    // 替换为你实际的本地服务根地址
    private const string BaseImageUrl = "http://localhost:你的实际端口/";
    
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string relativePath && !string.IsNullOrWhiteSpace(relativePath))
        {
            return new Uri(Path.Combine(BaseImageUrl, relativePath), UriKind.Absolute);
        }
        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

在XAML的资源字典中注册转换器：

<Window.Resources>
    <local:RelativeImagePathConverter x:Key="ImagePathConverter"/>
</Window.Resources>

绑定的时候指定转换器即可：

<Image Source="{Binding imagePath, Converter={StaticResource ImagePathConverter}}"/>

• 本地服务地址必须带上http://或https://协议前缀，否则Image控件会把传入的地址识别成本地磁盘文件路径，导致远程图片加载失败
• 如果服务端口、部署地址后续可能变更，建议把根地址抽成配置项，不要硬编码在代码里

内容的提问来源于stack exchange，提问作者Gazdallah Amira