2

I am developing a Cross-Platform app in Xamarin Visual Studio 2019 and having issues with image display.

I am trying to show an image with the following XAML code.

<StackLayout Grid.Row="0" Grid.Column="0" Spacing="0" >
    <Image
        HorizontalOptions="CenterAndExpand"
        VerticalOptions="CenterAndExpand"
        Source="logo"
        WidthRequest="{OnPlatform iOS=300, Android=250}">
    </Image>
</StackLayout>

Problem is image not displaying on either preview or deployed app.

I took references from multiple forums including help from StackOverflow but couldn't tackle the issue.

Here are the points and methods I worked on to resolve the issue.

  1. The file named logo is an android resource folder and is a proper .png file.
  2. Property for the file is set to AndroidResource.

  3. As per answers posted here, Xamarin Images not showing, file name does not have a hyphen in it, and also tried other posted answers on the same page.

  4. Image size 307X80 pixels so it's well within range for memory or size.

Android Drawable folder also contain default xamarin_logo.png image and that file works fine. But not newly added images. Is there anything I am missing here to add these image files to the solution?

Mahadev
  • 856
  • 1
  • 17
  • 44

2 Answers2

1

Your XAML code is Correct but you have missed the image extension .png you must define your image Extension(format) Ex: (image.png or image.jpeg) That is the reason the image is not displayed.

<StackLayout Grid.Row="0" Grid.Column="0" Spacing="0" >
    <Image
        HorizontalOptions="CenterAndExpand"
        VerticalOptions="CenterAndExpand"
        Source="logo.png"
        WidthRequest="{OnPlatform iOS=300, Android=250}">
    </Image>
</StackLayout>
Delpin Susai Raj
  • 205
  • 1
  • 9
  • I should have mentioned it in question but that's not the issue. Other image does not need an extension to work and still, I tried `logo` with extension. It's not working. – Mahadev Feb 03 '20 at 18:40
1

Either the image extension or image path or the build action for the image seems to be the problem in your case. I tried your code and got that working fine for both png and jpg images. 

<StackLayout Spacing="0">
    <Image HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"
            Source="github.png" WidthRequest="{OnPlatform iOS=300, Android=250}" />
    <Image HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"
            Source="githubb.jpg" WidthRequest="{OnPlatform iOS=300, Android=250}" />
</StackLayout>

Note: I have removed the grid.row and grid.column indexing as I am not using my StackLayout inside a grid.

Please make sure whether you have kept your images directly inside the drawable folder in the Resources in Android. If not, you may have to give the Source name as FolderName\ImageName.Extension.

Refer below link for more details:

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

Also, please ensure whether the BuildAction of your image is AndroidResource and Custom Tool is MSBuild:UpdateGeneratedFiles. Please refer to the below image.

enter image description here

I got the below output for the code which I posted above.

enter image description here

I hope that helps.

Harikrishnan
  • 1,474
  • 2
  • 11
  • 25
  • Thank you for your answer. I followed your answer but It's still not working. – Mahadev Feb 03 '20 at 19:30
  • If possible, could you please share your project or the exact code that you are using so that you can get more help. If you have exactly done what I have given, it must be working fine. Surely it might be some silly mistakes missed somewhere which everyone tends to do. – Harikrishnan Feb 03 '20 at 19:32
  • The only difference I could see is I have tried in my sample with a 64 x 64 Github image instead of the size you mentioned. – Harikrishnan Feb 03 '20 at 19:34
  • I'll try the image with the same dimensions. If it's not working, I'll share the code. – Mahadev Feb 03 '20 at 19:42
  • It worked and doing so, I think I found a bug in VS. Let me explain. I have a folder named images in my core project where I have all the images. When I am trying to use the logo, I dragged the logo.png from that folder to Android Resource->Drawable folder. This was the problem. For images to properly work, Image must be copied to a drawable folder using File Explorer os OS, copying files using VSs Solution Explorer doesn't seem to work. I haven't found this reference anywhere. Anyways, thanks for your extensive answer Will help others. Regards – Mahadev Feb 03 '20 at 19:52
  • Happy it got worked for you. As said, its just a simple mistake that often makes things complicated. Glad that you got your problem fixed... Happy coding... – Harikrishnan Feb 03 '20 at 19:55