如何在 Razor Pages 中加载图像/字节数组答案

【问题标题】：How do I load an image/byte array in Razor Pages如何在 Razor Pages 中加载图像/字节数组
【发布时间】：2021-08-31 11:27:11
【问题描述】：

我正在尝试让页面使用@Url.Page 从数据库加载图像。我可以看到它命中了 PageModel 处理程序方法，但图像永远不可见。

我发现的所有内容都与使用 MVC 的 Razor 视图有关。我专门使用 Razor 页面，没有控制器，只有页面模型。

页面：

            <div class="row" style="@(Model.ImageFileId.HasValue ? "" : "display: none;")">
               <div class="form-group col-1">
                  <label>Existing Image: </label>
               </div>
               <div class="col-11">
                  <img src="@Url.Page("Edit", "FilePreview", new { imageFileId = Model.ImageFileId })" />
               </div>
            </div>

页面处理方法：

        public async Task<IActionResult> OnGetFilePreview(int imageFileId)
        {
            // Get Image File from database
            File imageFile = await _fileService.GetFileById(imageFileId);

            return File(imageFile.FileContent, imageFile.MimeType, imageFile.FileName);
        }

【问题讨论】：

您应该首先查看页面源代码，看看是否生成了正确的 src 值。
@Mike Brind 我检查了 src 值，我认为这是我所期望的。这是<img src="/admin/stories/edit/filepreview?imageFileId=49676">
对该 URL 的请求返回什么？
你检查过Model.ImageFileId是否真的有一个字节[]图像的值？

标签： asp.net-core razor-pages

【解决方案1】：

我用我的项目测试，它可以工作，你需要确保你返回的文件是正确的。这是一个演示：

查看：

<img src="@Url.Page("Index5", "FilePreview", new { imageFileId = 1 })" />

handler（我用 wwwroot 中的文件进行测试）：

public async Task<IActionResult> OnGetFilePreview(int imageFileId)
        {
         
            string path = Path.Combine(Directory.GetCurrentDirectory(), @"wwwroot\imgs\1.jpg");

            byte[] bytes = System.IO.File.ReadAllBytes(path);
            return File(bytes, "application/octet-stream", "1.jpg");
            
        }

结果：

【讨论】：

【解决方案2】：

原来我写的代码没问题，我保存在数据库中并因此返回的数据不是字节数组，而是Base64字符串。如果有人偶然发现这个问题，方法我曾经显示保存为 byte[] 的 db 中的图像应该可以正常工作。

【讨论】：