How to set Image Source both stream and string?

Question

I have a mobile app where I show files and folders. I show these files and folders in a list. I also show thumbnails of these files and folders in this list. The thumbnails of some files are provided by the api. For example thumbnail images of file types such as "png, jpg, txt, docx, pptx, ..." are sent by the api. But folders and files like zip, rar, mp3, mp4 don't have thumbnail images. For these, I show thumbnail images as local images in the mobile application (from the resource section of android and ios applications). For example "folder.png", "rar.png" etc.

In other words, the images in the local are given to the image source as a string. In the past, thumbnails were imported from api as web uri. But now it comes as WebResponse (because bearear token is added to thumbnail request, so I have to add bearer token to WebRequest header and send web request and get result as WebResponse)

Can I do this so that it will both show the images in the local and show the image returned as a result of the web response?

For example:

<ListView ItemsSource="{Binding Items}">
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
        <ViewCell.View>
          <StackLayout>
            <Image Source={Binding Thumbnail} />
            <Label Text={Binding Name} />
          </StackLayout>
        </ViewCell.View>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

Model:

public class Item
{
  public string Thumbnail { get; set; }
  public string Name { get; set; }
}

ViewModel:

List<Item> Items = new List<Item>();

Items = GetItemsFromApi();

foreach(var item in Items)
{
  switch(Path.GetExtension(item.Name))
  {
    case ".png": item.Thumbnail = GetTumbnailFromApi(item); //I used to be able to use strings with uri, but now web response is returned here.
    case ".rar": item.Thumbnail = "rar.png";
    default: item.Thumbnail = "folder.png";
  }
}

Answer 1

Hello PelinKonaray ,​

Welcome to our Microsoft Q&A platform!

We cannot set the respone as image's source dirctly. How do you return the image in the response? Using byte array or base64string? You could convert it to the imageSource. For example, get the byte array from the response and convert it to imageSource.

   var httpResponse = await client.PostAsync(url, content);   
   Byte[] results = httpResponse.Content.ReadAsByteArrayAsync().Result;  
     
   image.Source = ImageSource.FromStream(() => new MemoryStream(results);  

Best Regards,

Jarvan Zhang

---

If the response is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.