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

Question

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

Are you using Blazor Server? Your code uses an absolute path too - whatever ContentRootPath contains, you'd end up with a path that starts at the disk's root. At the very least use "img/Account/Pamphlet Design.png". — Panagiotis Kanavos
– Panagiotis Kanavos, Commented Feb 24, 2022 at 11:40
@PanagiotisKanavos that does not work as ContentRootPath does not return the full required path. However, I found Directory.GetCurrentDirectory() does return the correct path, and I was able to load it through that. I will test the path without the /img now. — CorrieJanse
– CorrieJanse, Commented Feb 24, 2022 at 11:42

Steve Py · Accepted Answer · 2022-02-24 11:50:25Z

1

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.

edited Feb 24, 2022 at 11:50

answered Feb 24, 2022 at 11:32

Steve Py

36.3k4 gold badges34 silver badges58 bronze badges

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

5 Comments

CorrieJanse Over a year ago

Image loading in the view is fine. The reason I want the image from the server is that I am generating a QR code on the fly. I then use a Template image from the server and superimpose the QR code on the image. That allows me to create custom pamphlets for the user on the fly with their store code on int.

Panagiotis Kanavos Over a year ago

@MrMoonMan for starters, you're probably using Blazor Server. You wouldn't be able to even access C: from a browser. Second, you used an absolute path. Remove the leading /

Steve Py Over a year ago

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.

CorrieJanse Over a year ago

@StevePy that worked perfectly post an answer and I will accept that.

Steve Py Over a year ago

I've added the blazor server comment to this answer. Good to hear you're up and running. I've just recently started with Blazor and absolutely loving it so far. :)

Surinder Singh · Accepted Answer · 2022-02-24 12:01:25Z

1

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";

answered Feb 24, 2022 at 12:01

Surinder Singh

1,5061 gold badge5 silver badges13 bronze badges

Comments

Esset · Accepted Answer · 2023-01-05 16:26:36Z

1

I created a "Image" folder in "wwwroot"

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

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

it works

edited Jan 5, 2023 at 16:26

Esset

1,0562 gold badges16 silver badges18 bronze badges

answered Jan 5, 2023 at 5:09

Farzad

112 bronze badges

1 Comment

Stefan Schmiedl Over a year ago

The question was how to reference the file in the @code section, not the template section.

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related