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

MrZeeIndo 161 Reputation points
2021-06-19T17:55:04.073+00:00

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);                   
                }                                            
            }
        }
Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,326 questions
{count} votes

Accepted answer
  1. MrZeeIndo 161 Reputation points
    2021-06-22T05:37:11.68+00:00

    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

    0 comments No comments

2 additional answers

Sort by: Most helpful
  1. MrZeeIndo 161 Reputation points
    2021-06-20T07:39:54.183+00:00

    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;
            }
    
    0 comments No comments

  2. MrZeeIndo 161 Reputation points
    2021-06-22T04:41:54.27+00:00

    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)); 
                     }    
                 }
             }