CODEWITHSUNDEEP
c#blazor.net-6.0
CorrieJanse
CorrieJanse

Reputation: 2598

How to acces an image/file in blazor @code section

Looking into opening an image on a blazor page's @code section, but I keep getting the following error.

System.IO.DirectoryNotFoundException: Could not find a part of the path 'C:\img\Account\Pamphlet Design.png'

Here is the code that I have tried among other:

var path = Path.Combine(Environment.ContentRootPath, @"/img/Account/Pamphlet Design.png");

var plampletBitmap = new Bitmap(path); // Error Here

Upvotes: 0

Views: 6375

Answers (3)

Farzad
Farzad

Reputation: 11

I created a "Image" folder in "wwwroot"

copy "myimage.jpg" in to the "Image" folder

< img src="../Image/myimage.jpg" alt="myimage..." >

it works

Upvotes: 1

Surinder Singh
Surinder Singh

Reputation: 1450

Make sure you have file in wwwroot folder of your project "wwwroot\img\Account\Pamphlet Design.png"

In your razor page, Inject WebHostEnvironment in your razor page

@inject IWebHostEnvironment hostEnvironment;

Get your file path like this

string path = hostEnvironment.WebRootPath + @"\img\Account\Pamphlet Design.png";

Upvotes: 1

Steve Py
Steve Py

Reputation: 34663

I'm not sure that Blazor can access an ASP.NET content root path, maybe in server mode, almost certainly not in web assembly mode.

Normally to access images you can create a /images folder under the Blazor Client's wwwroot and load the images from there via: images/filename. I just compute the path in the model and bind it directly to an <img src="@Model.ImagePath">

For Blazor server you could try Path.Combine(Environment.ContentRootPath, "wwwroot", "img/Account", "Pamphlet Design.png"); I think even in Blazor server it sandboxes file access, though the leading slash in "/img" might also just be the problem if not.

Upvotes: 1

Related Questions