图像未显示（Xamarin 表单）
Posted
技术标签:
【中文标题】图像未显示（Xamarin 表单）【英文标题】：Image is not displaying (Xamarin Forms) 【发布时间】：2020-06-10 04:41:18 【问题描述】：我已经在屏幕上显示了除图像之外的数据现在我还想查看图像，因为我可以看到所有数据，例如 id 名称等，以下是代码： 我需要在哪里进行哪些更改？
第 1 页 XAML C 清晰代码：（此页面上的更改？）
public partial class MainPage : ContentPage
private static readonly HttpClient client = new HttpClient();
public UserResponse result;
public String test;
public MyUser user;
public MainPage()
InitializeComponent();
// Task.Run(async () => await GetinfoAsync());
_ = GetinfoAsync();
public async Task GetinfoAsync()
var responseString = await client.GetStringAsync("https://reqres.in/api/users/2");
result = JsonConvert.DeserializeObject<UserResponse>(responseString);
if (result != null)
Device.BeginInvokeOnMainThread(() =>
test = dis.Text = "Id:- " + result.Data.id + "\nEmail:- " + result.Data.email + "\nFirst Name:- " + result.Data.first_name + "\nLast Name:- " + result.Data.last_name + "\nImage:- " + result.Data.avatar; dis.Text = test;
);
private async void click_me(Object sender, EventArgs args)
await this.Navigation.PushAsync(new Data(result));
第 2 页 XAML C 语言代码：（此页面上的更改？）
public partial class Data : ContentPage
private MyUser _obj;
public MyUser obj
get return _obj;
set
_obj = value;
OnPropertyChanged();
public String show;
public Data(UserResponse result)
//show = test;
InitializeComponent();
obj = result.Data;
// displaylabel.Text = test;
用于设计的第 2 页 XAML 代码：
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="demo.Data" x:Name="MyPage" >
<ContentPage.Content >
<StackLayout Padding="20">
<Label Text="Id" TextColor="Red" />
<Editor BindingContext="x:Reference Name=MyPage" Text="Binding obj.id" IsReadOnly="True" />
<Label Text="First Name" TextColor="Red"/>
<Editor BindingContext="x:Reference Name=MyPage" Text="Binding obj.first_name" IsReadOnly="True"/>
<Label Text="Last Name" TextColor="Red"/>
<Editor BindingContext="x:Reference Name=MyPage" Text="Binding obj.last_name" IsReadOnly="True"/>
<Label Text="Email" TextColor="Red"/>
<Editor BindingContext="x:Reference Name=MyPage" Text="Binding obj.email" IsReadOnly="True"/>
<Editor BindingContext="x:Reference Name=MyPage" Text="Image" IsReadOnly="True"/>
<Image BindingContext="x:Reference Name=MyPage" Source="Binding obj.avatar"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
【问题讨论】：
这个question发生了什么事 这能回答你的问题吗？ Issue with showing the Image 我不太明白。所以我上传了另一个更详细的问题。所以请帮助我 @JamesS 不，先生，它不是因为我是 C 语言的新手并且第一次使用 xamarin @SajawalZubairi 我不会为基本相同的问题上传新问题，而是使用附加信息编辑您先前存在的问题。 【参考方案1】：由于obj.avatar 的值是字符串类型，而ImageSource 的Source 必须是ImageSource 类型。为此使用转换器。
转换器代码
将它添加到与 Data 类相同的命名空间中。
namespace demo
public class ImageUriConverter : IValueConverter
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
if (value != null)
return ImageSource.FromUri(new Uri(value.ToString()));
return null;
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
return value;
在页面资源中为你的转换器设置静态资源
数据页 Xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:local="clr-namespace:demo"
x:Class="demo.Data" x:Name="MyPage" >
<ContentPage.Resources>
<local:ImageUriConverter x:Key="imageConverter"></local:TestConverter>
</ContentPage.Resources>
通过绑定使用转换器
<Image HeightRequest="300" Source="Binding obj.avatar, Converter=StaticResource imageConverter"/>
【讨论】：
看不到图片?【参考方案2】：您需要为 ImageSource 创建另一个图像属性，如下所示：
private ImageSource img;
public ImageSource Img
get return img;
set
img = value;
OnPropertyChanged();
private UserDTO Obj;
public UserDTO obj
get return Obj;
set
Obj = value;
OnPropertyChanged();
现在
public Data(UserResponse result)
//show = test;
InitializeComponent();
obj = result.Data;
if (!string.IsNullOrEmpty(obj.avatar))
Img = await getImageSource(obj.avatar);
并将 Img 属性绑定到您的 XAML 代码，如下所示：
<StackLayout Padding="20, 60">
<Label Text="Id" TextColor="Red" />
<Editor BindingContext="x:Reference Name=MyPage" Text="Binding obj.id" IsReadOnly="True" />
<Label Text="First Name" TextColor="Red"/>
<Editor BindingContext="x:Reference Name=MyPage" Text="Binding obj.first_name" IsReadOnly="True"/>
<Label Text="Last Name" TextColor="Red"/>
<Editor BindingContext="x:Reference Name=MyPage" Text="Binding obj.last_name" IsReadOnly="True"/>
<Label Text="Email" TextColor="Red"/>
<Editor BindingContext="x:Reference Name=MyPage" Text="Binding obj.email" IsReadOnly="True"/>
<Editor BindingContext="x:Reference Name=MyPage" Text="Image" IsReadOnly="True"/>
<Image BindingContext="x:Reference Name=MyPage" Source="Binding Img" HeightRequest="100" WidthRequest="100"/>
</StackLayout>
添加以下方法获取图片来源：
public async Task<ImageSource> getImageSource(string url)
byte[] byteArray = Client.DownloadData(url);
return ImageSource.FromStream(() => new MemoryStream(byteArray));
现在在 Img 中获取图像
Img = 等待 getImageSource(obj.avatar);
输出：
希望对你有帮助
谢谢
【讨论】：
还是看不到图片? 它对我有用 我正在分享你完整的 XAML 代码请再次检查 你分享的和我的一样，但还是没有帮助 UserDTO 就像您的 MyUser 模型，希望以上答案对您有所帮助 照你说的做，但还是看不到任何图像（我使用的是安卓设备）以上是关于图像未显示（Xamarin 表单）的主要内容，如果未能解决你的问题，请参考以下文章