I can't display an image in app from firebase storage using the image url.

Question

Hi,

So I want to show an Image which I have successful stored into firebase storage. I got the user to pick an image from gallery and saved it on the database. I then saved the URL link in the realtime database, which I thought I could just bind to the image.source however this does not work. I have also tried copying the link from the firebase console straight into XAML that didn't work. I also tried downloading the image onto the phone(code below) how ever this doesn't work. I can't find any tutorials anywhere for xamarin forms. I'm a bit stuck here.

public void LoadImages(string imgurl)
        {
            var webClient = new WebClient();
            byte[] imgBytes = webClient.DownloadData(imgurl);
            //string img = Convert.ToBase64String(imgBytes);
            petimage.Source = ImageSource.FromStream(() => new MemoryStream(imgBytes));                     
        }

protected override void OnAppearing()
        {
            base.OnAppearing();
            RetrivePetInfo();                                 
        }

private async void RetrivePetInfo()
        {           
            var pet = await firebaseHelper.GetPet(PetName);
            if (pet != null)
            {


                if(pet.imageUrl!=null)
                {
                    LoadImages(pet.imageUrl);                   
                }                                            
            }
        }

Answer 1

Found the answer:

petimage.Source = ImageSource.FromUri(new Uri(pet.imageUrl));

the problem was when I was calling all my info from the realtime database I actually didn't code to call the imageURL. It is now working thank you for your help

Answer 2

So I have managed to get it to show an Image, However I'm still facing a problem.

If I copy and paste the link from my realtime database into the following code I manage to show the image on the page:

petimage.Source = ImageSource.FromUri(new Uri("https://firebasestorage.googleapis.com/v0/b/myapp.appspot.com/o/PetProfileImages%2Fimages.jpeg?alt=media&token=236dbe01-82d3-42b3-8f8b-f0bc9da99776")); //(This works)

If i call that same link from the real-time database into the same code like above seen below. I get an error message saying it can't be set to null.

petimage.Source = ImageSource.FromUri(pet.DownloadUrl));

If I then try and call that link from firebase storage and pass that string I get the following error:

Firebase.Storage.FirebaseStorageException: 'Exception occured while processing the request.
Url: https://firebasestorage.googleapis.com/v0/b/myapp.appspot.com/o/PetProfileImages%2F
Response: {
"error": {
"code": 400,
"message": "The path may not end with '/' or contain two consecutive '/'s"
}
}'

Here is how I am retrieving that link:

 public async Task<string> GetFile(string fileName)
         {
             return await firebaseStorage
                 .Child("PetProfileImages")
                 .Child(fileName)
                 .GetDownloadUrlAsync();
         }

  private async void RetrivePetInfo()
         {           
             var pet = await firebaseHelper.GetPet(PetName);
             if (pet != null)
             {                                       
                 var _path = await GetFile(pet.ImageFileName);
                 if (_path != null)
                 { 
                     petimage.Source = ImageSource.FromUri(new Uri(_path)); 
                 }    
             }
         }

Answer 3

Well I don't know which part is wrong as the code doesn't work at all, as no image appears on the page. And I wasn't getting an error.

I changed the code slightly to this now and getting the following error Firebase.Storage.FirebaseStorageException "code": 400, "message": "The path may not end with '/' or contain two consecutive '/'s":

protected override void OnAppearing()
{
base.OnAppearing();
RetrivePetInfo();
}

    private async void RetrivePetInfo()
    {           
        var pet = await firebaseHelper.GetPet(PetName);
        if (pet != null)
        {               
            var path = await LoadImages(pet.ImageFileName);
            if (path != null)
            {                   
                petimage.Source = path;
            }
        }
    }

 public async Task<ImageSource> LoadImages(string fileName)
        {
            var webClient = new WebClient();
            var stroageImage = await new FirebaseStorage("myapp.appspot.com")
                .Child("PetProfileImages")
                .Child(fileName)
                .GetDownloadUrlAsync();
            string imgurl = stroageImage;
            byte[] imgBytes = webClient.DownloadData(imgurl);
            //string img = Convert.ToBase64String(imgBytes);
            var img = ImageSource.FromStream(() => new MemoryStream(imgBytes));
            return img;
        }