Fonts/images/assets in a custom MAUI NuGet package not found

[Divyesh-Bhatt]

Description

I am developing a library project of custom controls for .Net MAUI and my controls uses SVG images. When I reference my library project in another project, the svg images I have in my library project are not showing up.

It gives this exceptions in:

Android exception:

[Glide] Load failed for [no_records] with dimensions [606x2154]
[Glide] class com.bumptech.glide.load.engine.GlideException: Failed to load resource
[Glide] There were 3 root causes:
[Glide] java.io.FileNotFoundException(/no_records: open failed: ENOENT (No such file or directory))
[Glide] java.io.FileNotFoundException(open failed: ENOENT (No such file or directory))
[Glide] java.io.FileNotFoundException(open failed: ENOENT (No such file or directory))
[Glide]  call GlideException#logRootCauses(String) for more detail
[Glide]   Cause (1 of 3): class com.bumptech.glide.load.engine.GlideException: Fetching data failed, class java.io.InputStream, LOCAL
[Glide] There was 1 root cause:
[Glide] java.io.FileNotFoundException(/no_records: open failed: ENOENT (No such file or directory))
[Glide]  call GlideException#logRootCauses(String) for more detail

iOS exception:

Unable to load image file 'no_records'.
      System.InvalidOperationException: Unable to load image file.
Microsoft.Maui.FileImageSourceService: Warning: Unable to load image file 'no_records'.

System.InvalidOperationException: Unable to load image file.
   at Microsoft.Maui.FileImageSourceService.GetImageAsync(IFileImageSource imageSource, Single scale, CancellationToken cancellationToken)
2024-01-09 23:18:01.481191+0530 Fyler.bov.Mobile.EH[24648:907392]          at Microsoft.Maui.FileImageSourceService.GetImageAsync(IFileImageSource imageSource, Single scale, CancellationToken cancellationToken)
2024-01-09 23:18:01.498051+0530 Fyler.bov.Mobile.EH[24648:907392] warn: Microsoft.Maui.FileImageSourceService[0]
      Unable to load image file 'tyler_logo'.
      System.InvalidOperationException: Unable to load image file.
Microsoft.Maui.FileImageSourceService: Warning: Unable to load image file 'tyler_logo'.

I found this ticket #10019 so followed it. Now image get added to nuget in buildTrasitive folder, but its not showing up in the page where I'm consuming it.

Steps to Reproduce

• Use Visual Studio to create a new .NET MAUI Class Library project and solution.
• Add a Resources folder to the project and add an Images Folder to the Resources folder.
• Add an SVG file to the Images folder added in the previous step. As noted here, the SVG file name must meet Android naming requirements.
• Set the SVG file's Build Action to MauiImage
• Build the solution.
• Add the nuget package in another demo project
• Try to use the custom control EmptyListMessage which contains svg file usage
• And will notice that message is showing but image not showing up

Link to public reproduction project repository

https://github.com/divyesh008/TestLib_011124.git

Version with bug

8.0.3

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

7.0.101

Affected platforms

iOS, Android

Affected platform versions

All

Did you find any workaround?

Add no_records.svg file in the project where I want to use custom control using library project.

Relevant log output

No response

[ghost]

Hi @Divyesh-Bhatt. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[Divyesh-Bhatt]

Sample code to reproduce the issue:
https://github.com/divyesh008/TestLib_011124.git

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[mattleibow]

I created this targets file that you can download and reference: https://github.com/mattleibow/PackagingMauiAssets/blob/main/MauiLibrary/PackMauiAssets.targets

The main cause of this issue is that the dotnet pack process does not know how to do anything with the maui assets, so just ignores them. Even if you add it to the package, you also need a targets file that brings them back into projects.

My linked targets file will make sure to generate all the required targets files as well.

We are still looking for a more reliable way to make this happen automatically.

[bronteq]

This bug also affects Windows platform.

I created a Maui library project with inside a custom control based on @Eilon HybridWebView; html/js code is inside Resources/Raw folder as suggested.
If the custom control is used in another Maui project which has a reference to the Maui library project, everything works fine.
If the custom control is used in another Maui project which uses the NuGet of the Maui library project, a 404 error page appears.

[bronteq]

@mattleibow targets file works and solves the issue for Windows platform, thank you! 🎉🎉🎉

[ArturWyszomirski]

@mattleibow this solution as well as the one from #10019 works well only if NuGet is used in a single project. When a project that consumes NuGet is set as a dependency of other project, it won't compile prompting error:
One or more duplicate file names were detected. All image output filenames must be unique: [...] C:\Users\User\.nuget\packages\microsoft.maui.resizetizer\8.0.91\buildTransitive\Microsoft.Maui.Resizetizer.After.targets 631

[sk1llsh0t]

On Android, I can load a PNG from a shared library by using a targets file as described above. SVG files have an issue loading so i will be avoiding this for now.

Regarding fonts from a shared library, if they are referenced as an EmbeddedResource and then loaded using AddEmbeddedResourceFont, they will work. I still get this warning message though even though the font is loaded and displayed on the screen properly. I also use this method for fontawesome fonts as well.

Unable to load font '/data/user/0/com.companyname.exampleapp/cache/LatoItalic.ttf' from assets.|Java.Lang.RuntimeException: Font asset not found /data/user/0/com.companyname.exampleapp/cache/LatoItalic.ttf

Not sure why this warning is being shown when the fonts are working fine.