如何将数据库中的blob图像转换为HTML img标签src属性值（后端ASP.NET MVC C#）

方案一：Base64内嵌模式（适合小尺寸图片） #

这种方式直接把图片内容编码后嵌入src属性，无需额外发起HTTP请求，适合头像、小图标等体积较小的图片。

实现步骤： #

• 从数据库读取Blob字段转换为byte数组
• 对byte数组做Base64编码，拼接对应图片格式的MIME前缀
• 直接将拼接后的字符串传给View赋值给img的src属性

代码示例 #

Controller逻辑

public ActionResult Index()
{
    using (var db = new YourDbContext())
    {
        // 替换为你自己的表和查询条件
        var imageData = db.ImageTable.FirstOrDefault(t => t.Id == 1)?.ImageBlob;
        if (imageData != null)
        {
            // 替换为实际的图片MIME类型，如image/png、image/gif，也可存在数据库中动态读取
            ViewBag.ImgSrc = $"data:image/jpeg;base64,{Convert.ToBase64String(imageData)}";
        }
        else
        {
            // 赋值默认占位图地址
            ViewBag.ImgSrc = "/Content/default-img.jpg";
        }
    }
    return View();
}

视图用法

<img src="@ViewBag.ImgSrc" alt="图片描述">

方案二：独立接口返回流模式（适合全场景，性能更优） #

这种方式单独写一个Action处理图片请求，img直接访问该Action的路由地址，适合大尺寸图片、需要权限控制、缓存控制的场景，性能远优于Base64内嵌。

实现步骤： #

• 新增接收图片ID参数的Action，从数据库读取Blob后返回FileResult
• 视图中img的src属性直接绑定该Action的路由地址即可

代码示例 #

Controller逻辑

// 可根据需要添加OutputCache特性做缓存，减少数据库查询
[OutputCache(Duration = 3600, VaryByParam = "id")]
public ActionResult GetImage(int id)
{
    using (var db = new YourDbContext())
    {
        var imageRecord = db.ImageTable.FirstOrDefault(t => t.Id == id);
        if (imageRecord == null || imageRecord.ImageBlob == null)
        {
            // 返回默认占位图
            return File("/Content/default-img.jpg", "image/jpeg");
        }
        // 支持动态传入MIME类型，可存在数据库中随Blob一起存储
        return File(imageRecord.ImageBlob, "image/jpeg");
    }
}

视图用法

<!-- 替换为你的Controller名称和实际的图片记录ID -->
<img src="@Url.Action("GetImage", "Home", new { id = 1 })" alt="图片描述">

注意：如果需要做图片访问权限控制，直接在GetImage方法中添加权限校验逻辑即可。

内容的提问来源于stack exchange，提问作者jeremy.o