How to correctly use the Image Source property with Xamarin.Forms?

Question

I am having difficulty bringing up an image on the content page in a stack layout. I looked through Xamarin API Documentation and found Xamarin.Forms.Image.Source Property, but no sample code to see how it's written. I also checked to see how it was written in C# and seems to match my code in terms of filename path, but in Xamarin, it may be slightly different since it's the first time doing this. The code I'm currently testing through an Android emulator (Google Nexus 5) in Visual Studio 2013 which runs fine, with the exception of the Image not showing.

Image Source:

new Image
{
     VerticalOptions = LayoutOptions.Center,
     HorizontalOptions = LayoutOptions.Center,
     Source = "/Assets/xamarin_logo.png",
},

Full Code:

public NFCPage()
    {
        StackLayout stackLayout = new StackLayout // instantiate a StackLayout object to layout its children
        {
            Spacing = 5, // amount of spae between each child element
            //HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.FillAndExpand, // defines how the elements should be laid out; fill the entire width of the content to the screen
            BackgroundColor = Color.Blue,

            Children = // gets a list of child elements
            {
                new Label
                {   
                    TextColor = Color.White,
                    BackgroundColor = Color.Red,
                    XAlign = TextAlignment.Center, // set text alignment horizontally
                    Text = "Google",
                },
                new Label
                {
                    Text = "Place your device directly at the symbol.",
                    XAlign = TextAlignment.Center,
                    TextColor = Color.White,
                },
                new Image
                {
                    VerticalOptions = LayoutOptions.Center,
                    HorizontalOptions = LayoutOptions.Center,
                    Source = "/Assets/xamarin_logo.png",
                },
                new Button
                {
                    Text = "QR Code",
                    TextColor = Color.White,
                },
                new Button
                {
                    Text = "?",
                    TextColor = Color.White,
                },
            }
        };
        Content = stackLayout; // apply stackLayout to Content
    }

Have you read this doc - http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/images/? Generally on Android you add the images as drawable resources, and then specify just the image name, and Forms will find the appropriate images in resources. — Jason, Jun 15 '15 at 16:53
Thanks for the information. I have another question to ask, where do I specify the image placement onto the page with this code `var NfcImage = new Image{Aspect = Aspect.AspectFit}; NfcImage.Source = ImageSource.FromFile("xamarin_logo.png");`? Doesn't work if I place it in the `new Image { }` constructor — TheAmazingKnight, Jun 15 '15 at 17:17
I figured it out, I followed the one titled "Local Images" and adjusted the file path name to `Source = "xamarin_logo.png"` and it worked. Thanks so much again for the link. It really helped. — TheAmazingKnight, Jun 15 '15 at 17:45

score 56 · Accepted Answer · edited Apr 14 '21 at 13:56

You shouldn't reference the path because the source property is cross-platform and since every platform has a different folder for assets like images, you only need to specify the filename and extension. The Image class knows where to look to find the file.

Image files can be added to each application project and referenced from Xamarin.Forms shared code. To use a single image across all apps, the same filename must be used on every platform, and it should be a valid Android resource name (which means no spaces and special characters). Place images in the Resources/drawable directory with Build Action: AndroidResource . High- and low-DPI versions of an image can also be supplied (in appropriately named Resources subdirectories such as drawable-ldpi , drawable-hdpi , and drawable-xhdpi ).

var beachImage = new Image { Aspect = Aspect.AspectFit };
beachImage.Source = ImageSource.FromFile("waterfront.jpg");

Source: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#local-images

In UWP project keeping all the images under the root folder is not a best solution, do you have any other solution where to keep the images under the sub folder. Please refer the question over here. http://stackoverflow.com/questions/37939758/xamarin-cross-platform-uwp-images-are-missing — Ashaar, Jun 21 '16 at 09:52
As usual nothing works in Xamarin forms.. I have tried all the solutions above — user1034912, Aug 09 '21 at 04:37

Asbar Ali · Answer 2 · 2017-12-02T14:42:47.747

7

If you are willing to add images using code, try this

Downloaded automatically and display the image

        var webImage = new Image { Aspect = Aspect.AspectFit };
        webImage.Source = ImageSource.FromUri(new Uri("https://xamarin.com/content/images/pages/forms/example-app.png"));

edited Dec 02 '17 at 14:42

answered Mar 02 '17 at 16:27

Asbar Ali

955
1
13
26

score 6 · Answer 3 · answered Oct 09 '16 at 18:20

6

Add the image in Solution Explorer by clicking Resources/Drawable folder and select New/Existing item.Please don't copy image to Resources/Drawable folder. I Hope it helps.

answered Oct 09 '16 at 18:20

Karthikeyan Ramasamy

69
1
1

How to correctly use the Image Source property with Xamarin.Forms?

3 Answers3

Linked