Скачать или смотреть How to Make Blazor WASM RCL Static Assets Accessible via URL in Browser

Discover how to configure your `Blazor WASM` project to access RCL static assets directly via URL. Simple steps for better web development!
---
This video is based on the question https://stackoverflow.com/q/78018722/ asked by the user 'fingers10' ( https://stackoverflow.com/u/10851213/ ) and on the answer https://stackoverflow.com/a/78019599/ provided by the user 'Ruikai Feng' ( https://stackoverflow.com/u/18177989/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, comments, revision history etc. For example, the original title of the Question was: Blazor wasm RCL static assets are not accessible directly via url in browser in net 8

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the Accessibility of RCL Static Assets in Blazor WASM

If you're developing a .NET 8 application using Blazor WebAssembly, you may have encountered an issue where static assets from a Razor Class Library (RCL) are not accessible directly via URL in your browser. Specifically, you might be able to access assets from your main Blazor WASM app but not from the RCL. In this post, we'll explore the problem, why it happens, and how to solve it.

The Problem

In your Blazor WASM application, you may have a project structure like this:

[[See Video to Reveal this Text or Code Snippet]]

Upon testing the asset accessibility, you might note the following behaviors:

Action
Observation
https://localhost/image.png
✅ This works
https://localhost/rclimage.png
❌ This doesn't work

The asset image.png from the BlazorWASM project can be accessed directly via URL, but the image rclimage.png from the Razor Class Library is not accessible the same way. Instead, you can only view rclimage.png using the following method in HTML:

[[See Video to Reveal this Text or Code Snippet]]

Why This Happens

In Blazor projects, static assets included in an RCL are treated differently than those in the main project. By default, the RCL static assets are embedded and require a specific URL structure to access them.

The Solution

To enable direct access to static assets from your RCL, you need to configure the RCL project's .csproj file. Here’s how you can make the assets accessible through a simplified URL path.

Locate Your RCL Project File: Open the RCL.csproj file in your Razor Class Library project.

Add Configuration: Modify the project file to include the following property group:

[[See Video to Reveal this Text or Code Snippet]]

Result

After adding the above configuration, you should be able to access your RCL static assets directly at the following URL:

[[See Video to Reveal this Text or Code Snippet]]

This adjustment enables a seamless integration where static assets from both the Blazor WASM project and the RCL can be accessed in the same manner, enhancing development efficiency.

Conclusion

Navigating accessibility issues in Blazor WASM can be tricky, particularly with RCL static assets. However, with the correct project configurations, you can ensure that all your assets are available directly through the desired URLs. Follow the steps above to improve your project structure and streamline the process of accessing your resources.

Feel free to reach out in the comments if you have any further questions or experiences to share regarding Blazor WASM and RCL integration!