从 Xamarin.Forms 中 JSON 文件中的 URL 加载照片答案

【问题标题】：Photo loading from URL in JSON file in Xamarin.Forms从 Xamarin.Forms 中 JSON 文件中的 URL 加载照片
【发布时间】：2020-01-31 15:00:37
【问题描述】：

我正在尝试从 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);
}

但这也不起作用。

【问题讨论】：

你需要使用https或者添加一个例外来允许http
@Jason 我尝试使用 https 但它仍然没有显示任何内容
您确定返回的 JSON 有效并且具有您向我们展示的结构吗？更多：您是否在加载后将 Image 绑定上下文设置为 json 对象？如果不是，图像控件如何知道Zdjecie 包含什么？另请注意，json对象不继承INotifyPropertyChange接口，所以如果在运行时更改Zdjecie属性，图像不会自动更新！
您的 ViewModel 属性也是 Uri 还是 UriImageSource ？检查这个stackoverflow.com/questions/40579372/…
当我将 viewModel 属性设置为 Uri（来自字符串）public Uri Zdjecie { get; set; } 时，当我单击列表中的项目以打开详细信息时显示此错误System.ObjectDisposedException: 'Can not access a closed Stream.' 我现在使用的代码是：var imageSource = new UriImageSource { Uri = new Uri(Zdjecie.ToString()) }; imageSource.CachingEnabled = false; imageSource.CacheValidity = TimeSpan.FromHours(1); foto.Source = imageSource;

标签： c# xamarin xamarin.forms

【解决方案1】：

您应该在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>

【讨论】：