如何访问 blazor @code 部分中的图像/文件答案

【问题标题】：How to acces an image/file in blazor @code section如何访问 blazor @code 部分中的图像/文件
【发布时间】：2023-01-05 13:16:00
【问题描述】：

考虑在 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

【问题讨论】：

你在使用 Blazor 服务器吗？您的代码使用绝对路径也是如此——无论 ContentRootPath 包含什么，你最终都会得到一个从磁盘根目录开始的 path。至少使用"img/Account/Pamphlet Design.png"。
不能用作 ContentRootPath 的 @PanagiotisKanavos 不会返回所需的完整路径。但是，我发现 Directory.GetCurrentDirectory() 确实返回了正确的路径，并且我能够通过它加载它。我现在将测试没有 /img 的路径。
然后你将如何处理你加载的这个图像？

标签： c# blazor .net-6.0

【解决方案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”中的前导斜杠也可能只是问题所在。

【讨论】：

视图中的图像加载很好。我想要来自服务器的图像的原因是我正在动态生成二维码。然后我使用来自服务器的模板图像并将二维码叠加在图像上。这使我能够使用 int 上的商店代码即时为用户创建自定义小册子。
@MrMoonMan 对于初学者，您可能正在使用 Blazor Server。您甚至无法从浏览器访问C:。其次，您使用了绝对路径。删除前导/
可以尝试 Path.Combine(Environment.ContentRootPath, "wwwroot", "img/Account", "Pamphlet Design.png"); 我认为即使在 Blazor 服务器中它也会沙盒文件访问，尽管如果不是，“/img”中的前导斜杠也可能只是问题所在。
@StevePy 完美地发布了一个答案，我会接受。
我已将 blazor 服务器评论添加到此答案中。很高兴听到你启动并运行。我最近才开始使用 Blazor，到目前为止我非常喜欢它。 :)

【解决方案2】：

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

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

@inject IWebHostEnvironment hostEnvironment;

像这样获取文件路径

string path = hostEnvironment.WebRootPath + @"imgAccountPamphlet Design.png";

【讨论】：

【解决方案3】：

我在“wwwroot”中创建“图像”文件夹将“myimage.jpg”放在“图片”文件夹中

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

有用

【讨论】：