Displaying an image with Xamarin Forms

Question

Solved: The answer was to update all of the nuget packages and target a newer version of Android. Now images loads as expected. I'm not happy with this as I was using exactly the code that Xamarin provided and targeting newer versions has deprecated some of the items the code relys on. Initial version was Xamarin.Forms v23 and I updated to V25

I have a brand new Xamarin forms project with a simple view in which I'm trying to display an image. I've tried several ways of getting an image to display and I am not having any luck at all.

I'm using <image> and I have also tried FFImageLoader control as well.

<StackLayout Orientation="Vertical">

        <ff:CachedImage Source="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" WidthRequest="100" HeightRequest="100" />

        <Button x:Name="btn" Text="Image" Clicked="Button_Clicked" />

        <Frame OutlineColor="Red">
            <Image x:Name="StupidImage" Source="{Binding Thumbnail}"  Aspect="Fill" HeightRequest="100" WidthRequest="100"   />
        </Frame>

        </StackLayout>

This is the current view. I've also set the Source directly to a value with no result.

I'm able to get a stream for the image. I'm able to read all of the bytes from the stream. I built a debug visualizer to display the bytes as an image. Getting the image from a source is not a problem. Getting the image control(s) to display the image is a problem.

I tried binding with a view model. When that failed, I tried that directly setting the source

StupidImage.Source = ImageSource.FromStream(() => result.Stream);

I also made a copy of the bytes and tried

StupidImage.Source = ImageSource.FromStream(() => new MemoryStream(imageBytes));

I've tried ImageSource.FromFile() and .FromUri. I tried adding an image to the project as a resource. Each try was the same, the resource was read and the bytes were available, but the image control just doesn't display it.

I thought maybe it was a size problem, so I set the size of the control. Nothing. I thought maybe it was a resolution problem, so I used a smaller image. I tried several different images of varying quality.

Then I gave up on the image control and I got the FFImageLoading nuget package and gave it a direct url to an image. Same example that FFImageLoading examples used. Still no image.

I tried the emulator and I tried 2 different physical devices. Same result.

I also tried setting an image on a button using btn.Image = "whatever.jpg" with the same result.

This is the result every time. I'm lost. How do I get images to display?

EDIT: I did get this to work, but only on the emulator

<Image x:Name="StupidImage" Source="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" />

and same for

StupidImage.Source = ImageSource.FromUri(new Uri("https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"));

EDIT 2 - Clarification

My goal is to allow the user to select a photo from the device and then display a preview of it.

Answer 1

If you want to use images in you app you can load them into your Shared Project, like

Make sure you change the Build Action to Embedded resource

Then in your code

image.Source = ImageSource.FromResource("App5.Images.useravatar.png");

Note the Resource name.

And XAML

<ContentPage.Content>
    <StackLayout>
        <Image x:Name="image" WidthRequest="50"/>
    </StackLayout>
</ContentPage.Content>

Answer 2

Just a few things you can take off the list:

[x] Adding a image from Visual studio :

1. Right click on the correct folder
2. select Add >> New File ... NB: you have to add it with visual studio and not just throw it in the folder. Visual studio needs to know about it

[x] When Adding the image is it in the correct place :

• For android: it has to be in

ProjectName.Driod.Resources.drawable folder

• For ios: it has to be in

ProjectName.iOS.Resources folder

[x] Naming Convention

• Its always best to use .png , all lowercase , no spaces or special char on both android and ios

• with ios you normally get 3 images of the same image with the following namting convention

  • theman.png
  • [email protected]
  • [email protected]

• They are all the same image just different sizes

[x] Showing it in xaml :

   <StackLayout>
     <Image Source="thedog.png" HeightRequest="100" WidthRequest="100" />
   </StackLayout>

• In your example you used a frame , how about a stacklayout ? a frame has more requirements.
• for MVVM you can change Source with the following , dont forget that twoway :)
  • Source="{Binding Thumbnail, Mode=TwoWay}"

NB This is VERY basic explanations