Blazor Server can't find images inside bin\debug directory when ran from Visual Studio

Question

The code below works only if the image is located here: "E:\Test\wwwroot\thumbnails\test.png"

<div style="background-image:url('/thumbnails/test.png');height:100%;background-size: cover;"></div>

But that code can't find the image if the image is located here instead when running in Visual Studio: "E:\Test\bin\Debug\net6.0\wwwroot\thumbnails\test.png"

The problem is that I generate images and they are put inside the wwwroot/thumbnails folder but Blazor Server can't find any images there when running from Visual Studio.

Steps to reproduce:

1 Put this code in a clean Blazor Server 6.0 project: Program.cs

IWebHostEnvironment env = app.Services.GetRequiredService<IWebHostEnvironment>();
const string DEBUG_FOLDERS = @"bin\Debug\net6.0";
string generatedExample = Path.Combine(env.ContentRootPath, DEBUG_FOLDERS, "wwwroot");
File.Copy(Path.Combine(env.ContentRootPath, "wwwroot", "home.svg"), Path.Combine(generatedExample, "generatedhome.svg"), true); // This copy will simulate generated thumbnail or SQLite database.

2 Add an svg image named "home.svg" into the wwwroot folder and set it to "copy if newer"

3 Add the following code to the index page:

<h1>Image below results in 404 error.</h1>
<img src="generatedhome.svg" style="width:500px;height:500px;" />

4 Run in Visual Studio, observe the 404 error and the image not displaying.

Or this 12KB sample project: here

Perhaps that is the problem. I assume that the bin/debug folder is 'a simulated production folder'. So when I have an application that performs CRUD operations on its own files (like generated thumbnails, settings or local SQLite operations) then I would assume that this should happen on the bin/debug folder contents, right? Otherwise, I will destroy my source files. — Napoleon
– Napoleon, Commented Nov 30, 2021 at 9:15
"...but Blazor Server can't find any images there when running from Visual Studio." and "4 Run in Visual Studio" There's always a bin/debug folder when running from Visual Studio and the deployed code has an if-check as seen in my 'hack'. So that can not possibly be the problem. — Napoleon
– Napoleon, Commented Nov 30, 2021 at 9:28

Napoleon · Accepted Answer · 2021-11-29 22:31:40Z

0

I found a hack that works but I firmly believe that I'm doing it incorrectly:

Program.cs

..
var app = builder.Build();

const string DEBUG_FOLDERS = @"bin\Debug\net6.0";
IWebHostEnvironment env = app.Services.GetRequiredService<IWebHostEnvironment>();
if (Directory.Exists(Path.Combine(env.ContentRootPath, DEBUG_FOLDERS)))
{
    env.ContentRootPath = Path.Combine(env.ContentRootPath, DEBUG_FOLDERS);
    env.WebRootPath = Path.Combine(env.ContentRootPath, "wwwroot");
}
Directory.SetCurrentDirectory(env.ContentRootPath);

By manually changing the ContentRootPath it will work. But why is it wrong in the first place? I'm hoping someone can supply a better answer than me.

edited Nov 29, 2021 at 22:31

answered Nov 28, 2021 at 20:09

Napoleon

4235 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Blazor Server can't find images inside bin\debug directory when ran from Visual Studio

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related