Blazor Web Assembly - accessing images in RCL

Question

I'm new to Blazor - so this may be obvious but I can't figure it out. I have a WebAssembly project and a separate Razor Class Library where I have some components. I have a component that I want an image in - I place the image in the wwwroot/img folder of the library and access as below

 <img src="/img/logo.png" alt="test logo" />

But it will not display - I've tried

<img src="_content/img/logo.png" alt="test logo" />

But it won't display either.

The only way I can get my image to display is to put it into the wwwroot/img folder of the Client Project. But I want my component library to be able to be used in other projects.

Any guidance much appreciated. I'm coming from a Windows Forms background so I have a lot to learn :)

Answer 1

I´m also new to web development, but afaik the wwwroot folder serves as folder for static files your webpage uses (this is also the only folder the browser can access for media files for security reasons as I have understood it).

I had the same problem some days ago, I solved it by putting everything into the wwwroot folder, but I also found an article in which another way is suggested.

http://blog.vivensas.com/static-image-in-blazor-inside-and-outside-web-root/

There it is basically suggested to create a method in the Startup.cs file, which will be able to get your images from elsewhere:

public void  Configure(IApplicationBuilder  app, IWebHostEnvironment env)
{
    app.UseStaticFiles();

    app.UseStaticFiles( new StaticFileOptions
    {
        FileProvider = new  PhysicalFileProvider(
        Path. Combine(Directory . GetCurrentDirectory(), “StaticFilesFolder” )),
        RequestPath = “/StaticFiles”
    });
}

Then you can use your images like this:

@page “/”
<h3> Display Image in Blazor</h3>
<div>
    <img  src=”/StaticFiles/Image/OutsideWebRoot.png”  />
</div>
@code {
}

Edit: Maybe I misunderstood your question, for this to work it also has to be in the client project. I don´t know the way to get images from other solutions than the client project.

Answer 2

I came across this problem as well in my Blazor Server application (.NET 6). I was using RCL in my blazor application and when I tried to save static assets in my RCL's /wwwroot/images and make use of them in that same RCL's component (to show an icon), I got a 404 when I utilized that in my Blazor app.

Here's how I did a little trick to get past this problem:

• I stored all my static assets in my Blazor app (instead of RCL)
• In my Blazor app's styleseet (site.css or any other), I created CSS variables for those assets, like:

    --logo: url(/images/logo/logo-light.png);

• and then in my RCL, I made use of them using a class selector and applied the content to that CSS variable created, like:

    .icon:before {
        content: var(--logo)
    }

Worked like a charm.

Answer 3

2 years later, just in case... at least in .Net 5, 6,...

To fix the problem you need to set the source of the image tag to _content/YourRazorClassLibraryName/img/logo.png

Example:

<img src="_content/YourRazorClassLibraryName/img/logo.png" />

Important

If you do not reference the image from HTML, like in the example, the image will NOT get downloaded to _content/YourRazorClassLibraryName/img. So, at least one html element in your app needs to use the image, otherwise it will not get downloaded. Setting the background image of elements in CSS will also cause the image to get downloaded.

You can inspect this by:

1. running your app
2. pressing F12 in chrome\edge to launch developer tools
3. go to Sources tab
4. expand [site_url]/_content/[YourRazorClassLibrary]
5. check if img folder is there or the image that is not referenced in the HTML exists