Blazor网格中展示数据库存储Image类型图片功能异常求助

问题原因 #

• 页面代码中img的src属性三元判断分支错误使用() => GetImage(e.Image) Lambda表达式语法，非空场景下并未实际调用GetImage方法，仅返回了一个委托对象。Blazor渲染时会将委托直接转为字符串，无法得到有效的base64图片地址，导致图片加载失败。
• GetImage方法中空值返回空字符串的逻辑无实际作用，空值场景已经在页面判断中走了默认占位图分支。

正确实现方案 #

方案1：直接修正三元表达式语法 #

删除Lambda声明，非空分支直接调用GetImage方法即可，修改后的img标签代码如下：

<tbody>
    @foreach (var e in EntitiesResult.Entities)
    {
        <tr class="col-sm">
            <td class="text-sm-center">
                <img src="@(e.Image != null ? GetImage(e.Image) : "img/no-camera-sign.jpg")" alt="" width="75">
            </td>
            <td class="text-sm-left">@e.IsahPrimKey</td>
            <td class="text-sm-left">@e.ExtraInfo</td>
            <td class="hidden-xs hidden-sm">@e.IsahTableName</td>
        </tr>
    }
</tbody>

方案2（更简洁）：整合逻辑到GetImage方法 #

将默认占位图的判断逻辑放到GetImage方法中，简化页面代码：

1. 修改GetImage方法：

protected string GetImage(byte[]? image)
{
    if (image != null)
    {
        return $"data:image/png;base64,{Convert.ToBase64String(image)}";
    }
    return "img/no-camera-sign.jpg";
}

2. 页面img标签直接简化为：

<img src="@GetImage(e.Image)" alt="" width="75">

内容的提问来源于stack exchange，提问作者Nulajo