Blazor server Not allowed to load local resource

Question

Hello;
I am using this code to show image

<AuthorizeView>  
    <Authorized>  
        <a href="Identity/Account/Manage">Hello, @context.User.Identity?.Name!</a>  
        <form method="post" action="Identity/Account/LogOut">  
            <button type="submit" class="buttonstyle"><img src="@logoutImage" alt="Logout" /></button>  
        </form>  
    </Authorized>  
</AuthorizeView>  

<style>  
    .buttonstyle {  
        border: thin;  
            padding-left: 15px;  
      background-color: transparent;  
        padding-left: 15px;  
    }  
    .buttonstyle:focus{  
        outline:none  
    }  
</style>  
@code{  
    string? logoutImage = $@"{Directory.GetCurrentDirectory()}\StaticFiles\images\Logout.png";  
}  

However, when I ran the browser, I received this error message

Not allowed to load local resource: file:///C:/Users/MBoua/source/repos/SyncfusionSAPSBordjSteel/SyncfusionSAPSBordjSteel/StaticFiles/images/Logout.png

Alternatively, if I use it like this

<img src="/StaticFiles/images/Logout.png" alt="Logout" />

It loaded without any problems

In my Program.cs , these lines of code are added

app.UseStaticFiles();  
        app.UseStaticFiles(new StaticFileOptions  
        {  
            FileProvider = new PhysicalFileProvider(  
                   Path.Combine(builder.Environment.ContentRootPath, "MyStaticFiles")),  
            RequestPath = "/StaticFiles"  
        });  
        app.UseRouting();  
        app.UseAuthentication();  
        app.UseAuthorization();  

The same things happened when I added the image folder to wwwroot

Answer 1

The results you've poste are expected. Browser security does not allow access to local local resources like files on the user's system.

file:///C:/Users/MBoua/source/repos/SyncfusionSAPSBordjSteel/SyncfusionSAPSBordjSteel/StaticFiles/images/Logout.png  

Images must be downloaded from the web server to the browser.

<img src="/StaticFiles/images/Logout.png" alt="Logout" />  

If you are trying to return a image that is outside the wwwroot, then you need to write an action (like Web API) that returns a file stream.

 <img src="/controller/action/1" alt="Logout" />