我正在尝试从JSON文件中的链接加载照片。我从链接反序列化JSON,并将链接绑定到图像源,如下所示:
<Image HorizontalOptions="Center" Source="" x:Name="foto"
WidthRequest="200" HeightRequest="200"/>
这是我的代码背后:
foto.Source = Zdjecie;
Zdjecie
是JSON文件中的值,如下所示:
[
{
"Nazwa": "Czekolada mleczna Sport & Fitness",
"Opis": "Przykładowy opis produktu Czekolada mleczna Sport & Fitness",
"Zdjecie": "https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg",
"WW": 0.28,
"WBT": 0.22,
"Energia": 31.8125,
"Tluszcz": 2.19375,
"Weglowodany": 3.225,
"Blonnik": 0.11875,
"Bialko": 0.45625,
"Zelazo": 0.1875,
"Wapn": 15.5
},
{
"Nazwa": "Czekolada mleczna Sport & Fitness2",
"Opis": "Przykładowy opis produktu Czekolada mleczna Sport & Fitness2",
"Zdjecie": "https://kif.pl/www/wp-content/uploads/2015/05/chocolate_PNG27-620x413.png",
"WW": 0.16,
"WBT": 0.21,
"Energia": 28.5625,
"Tluszcz": 2.19375,
"Weglowodany": 2.94375,
"Blonnik": 0.4875,
"Bialko": 0.34375,
"Zelazo": 0.8125,
"Wapn": 0
}
]
我认为一切都很好,但是我也尝试使用以下方法加载未加载的照片:
foto.Source = new UriImageSource()
{
img = new Uri(Zdjecie);
}
但这也不起作用。
您应该在该行中添加一个断点,foto.Source = Zdjecie;
以查看是否具有的正确值Zdjecie
。我编写了一个简单的演示,它可以正常运行,您可以检查以下代码:
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private void Button_Clicked(object sender, EventArgs e)
{
string jsonStr = "[{'Nazwa': 'Czekolada mleczna Sport & Fitness','Opis': 'Przykładowy opis produktu Czekolada mleczna Sport & Fitness', 'Zdjecie': 'https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg'}]";
var ObjContactList = JsonConvert.DeserializeObject<List<RootObject>>(jsonStr);
RootObject obj = ObjContactList[0];
foto.Source = obj.Zdjecie;
}
}
public class RootObject
{
public string Nazwa { get; set; }
public string Opis { get; set; }
public string Zdjecie { get; set; }
}
在Xaml中:
<StackLayout>
<!-- Place new controls here -->
<Button Clicked="Button_Clicked" Text="Click to load the Image"
HorizontalOptions="Center"
/>
<Image HorizontalOptions="Center" Source="" x:Name="foto"
WidthRequest="200" HeightRequest="200"/>
</StackLayout>