c# - How to display an icon from a json string in a Label

Question

I have: api and want to display Icon in array weather -> Icon.

For now I display only the string in this API on the display screen on iOS but I can't see the icon image.

My MainPage.xaml look like this:

             <Frame CornerRadius="10"  
                   OutlineColor="Red"
                   Margin="10,0,10,0"
                   BackgroundColor="White"
                   Opacity="0.5">

                <StackLayout VerticalOptions="Center">          
                    <Label x:Name="infoLabel"
                                   Grid.ColumnSpan="3"
                                   TextColor="Black"
                                   HorizontalOptions="Center"
                                   FontAttributes="Bold" 
                                   FontSize="15" />
                     <Label x:Name="infoLabel1"
                                   Grid.ColumnSpan="3"
                                   TextColor="Black"
                                   HorizontalOptions="Center"
                                   FontAttributes="Bold" 
                                   FontSize="15" />
                </StackLayout> 
            </Frame>

My MainPage.xaml.cs look like this:

string Info = DateDays.DayOfWeek + DateDays.ToString(" MM/dd - HH:mm") + " " + weatherData.weatherForecast[0].Weather.Icon + " " + weatherData.weatherForecast[0].Temperature + "°C";
            infoLabel.Text = Info;

            string Info1 = DateDays1.DayOfWeek + DateDays1.ToString(" MM/dd - HH:mm") + " " + weatherData.weatherForecast[1].Weather.Icon + " " + weatherData.weatherForecast[1].Temperature + "°C";
            infoLabel1.Text = Info1;

And the result is:

What is the correct way to show the icon?

Answer 1

you have to translate the code "r01n" into a url. See https://www.weatherbit.io/api/codes

<Image Source="https://www.weatherbit.io/static/img/icons/r01n.png" />

you can build the url like this

var url = $"https://www.weatherbit.io/static/img/icons/{weatherData.weatherForecast[0].Weather.Icon}.png";