如何访问 blazor @code 部分中的 image/file

Question

正在考虑在 blazor 页面的@code 部分打开图像，但我不断收到以下错误。

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

这是我尝试过的代码：

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

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

Answer 1

我不确定 Blazor 是否可以访问 ASP.NET 内容根路径，也许在服务器模式下，几乎可以肯定不能在 Web 程序集模式下。

通常要访问图像，您可以在 Blazor 客户端的 wwwroot 下创建一个 /images 文件夹，并通过以下方式从那里加载图像：images/filename。我只是计算模型中的路径并将其直接绑定到 <img src="@Model.ImagePath">

对于 Blazor 服务器，您可以尝试 Path.Combine(Environment.ContentRootPath, "wwwroot", "img/Account", "Pamphlet Design.png"); 我认为即使在 Blazor 服务器中，它也会对文件访问进行沙箱处理，但如果不是，“/img”中的前导斜杠也可能是问题所在。

Answer 2

确保项目的 wwwroot 文件夹中有文件“wwwroot\img\Account\Pamphlet Design.png”

在你的 razor 页面中，在你的 razor 页面中注入 WebHostEnvironment

@inject IWebHostEnvironment hostEnvironment;

像这样获取你的文件路径

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