Provide a better error message or try to load PNGs if user specifies svgs

[JRPMike]

Description

In my original project, I have SVG files that are used in the XAML and in the .cs files. For the XAML, I have to add them as MauiImages and EmbeddedResources (so that I can access the bytes to render the image using SkiaSharp). My Android project works perfectly but the iOS crashes with "System.InvalidOperationException: Unable to load image file."

ImageSource.FromFile and loading EmbeddedResources does not work (for me) on iOS. I think there is an issue with how the images are dealt with on iOS side. It happens with every SVG file in the main project that I'm working on. The first commit in my repository is just the ImageSource.FromFile issue. The latest has additional code to highlight the resource issue. Both commits work fine on Android but not on iOS.

Steps to Reproduce

1. Run the solution in an Android simulator. Note that it runs correctly.
2. Run the solution in an iOS simulator. Note that it crashes on the ImageSource.FromFile statement.

Link to public reproduction project repository

https://github.com/JRPMike/MauiImagesourceIssue_iOS.git

Version with bug

8.0.40 SR5

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS17

Did you find any workaround?

Yes and no. The workaround for the ToolbarItem is in the repository. This workaround does not work for my issue loading embedded resource SVG files.

Relevant log output

[0:] Microsoft.Maui.FileImageSourceService: Warning: Unable to load image file 'loading.svg'.

System.InvalidOperationException: Unable to load image file.
   at Microsoft.Maui.FileImageSourceService.GetImageAsync(IFileImageSource imageSource, Single scale, CancellationToken cancellationToken)
[0:] Microsoft.Maui.FileImageSourceService: Warning: Unable to load image file 'loading.svg'.

System.InvalidOperationException: Unable to load image file.
   at Microsoft.Maui.FileImageSourceService.GetImageAsync(IFileImageSource imageSource, Single scale, CancellationToken cancellationToken)
**System.InvalidOperationException:** 'Unable to load image file.'

[github-actions[bot]]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• Fonts/images/assets not found in an implicitly referenced project (#21469), similarity score: 0.80
• Microsoft.Maui.Controls.ImageSource.FromFile fails in iOS when image in subfolder (#22887), similarity score: 0.79

Closed similar issues:

• SVGs not showing on iOS (#8663), similarity score: 0.80
• [.net7][iOS] IconImageSource on TabbedPage Causes Crash [MAUI Blazor] [Related #12403] (#14850), similarity score: 0.78
• Maui Resizetizer Error - Unable to allocate pixels for the bitmap when using an SVG image (#12109), similarity score: 0.78

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[JRPMike]

Ok, so changing to using .png instead of .svg works for both (as in the documentation, that I apparently missed). There should be a transform or a warning or better error message suggesting this as a solution as the current behavior is not at all intuitive (especially since it works fine to reference the .svg file on Android).

[Zhanglirong-Winnie]

This issue has been verified using Visual Studio 17.11.0 Preview 2.1 (8.0.40 & 8.0.21). Can be reproduced on iOS platform.

[Domik234]

Ok, so changing to using .png instead of .svg works for both (as in the documentation, that I apparently missed). There should be a transform or a warning or better error message suggesting this as a solution as the current behavior is not at all intuitive (especially since it works fine to reference the .svg file on Android).

MAUI uses Resizetizer to convert svg files to png files. That happens only for MauiImage/MauiIcon/MauiSplash build actions. That's the reason why you can use .png for both but that also means that it's no more vector image but raster image. This action provides multiple sizes result that can be used to distribute only the right size for specific device that uses the app after publishing to Apple AppStore/Google Play.

Still using the Embedded Resource should let you be able to reach the file in the package but decoding/loading the image must be supported onto the platform (or you have to add the support using package or custom implementation) and you have to know the correct path.

Maybe this can help: #7070 (reply in thread)