AngularJS表格无法显示字节数组图片 报ERR_INVALID_URL错误

• ASP.NET MVC 默认的Json()序列化器处理byte[]类型时，会输出由字节数值组成的数组（格式类似[255,216,255,224,...]），而不是前端Data URL要求的Base64字符串。直接把这个数值数组拼接到data:image/...后面，得到的是非法URL，因此触发net::ERR_INVALID_URL错误。
• 额外隐患：AngularJS 1.x版本对ng-src中的长插值字符串有安全校验，直接拼接未经过信任的地址，即使格式正确也可能被安全策略拦截无法加载。

1. 后端改造：将图片字节数组转为Base64字符串后返回 #

首先修改Disco_Model类中foto_dis的属性类型，从byte[]改为string，然后在组装列表数据时，把数据库读取到的字节数组转成Base64字符串：

public JsonResult Get_discos()
{
    DataSet ds = dblayer.Bindgrid();
    var serializer = new JavaScriptSerializer();
    serializer.MaxJsonLength = 500000000;

    List<Disco_Model> listdisco = new List<Disco_Model>();
    foreach (DataRow dr in ds.Tables[0].Rows)
    {
        listdisco.Add(new Disco_Model
        {
            id_dis = dr["id_dis"].ToString(),
            nombre_dis = dr["nombre_dis"].ToString(),
            ano_dis = dr["ano_dis"].ToString(),
            genero_dis = dr["genero_dis"].ToString(),
            // 核心修改：字节数组转Base64字符串
            foto_dis = Convert.ToBase64String((byte[])dr["foto_dis"]),
            nombre_art_dis = dr["FK_nombre_art_dis"].ToString()
        });           
    }
    var json = Json(listdisco, JsonRequestBehavior.AllowGet);
    json.MaxJsonLength = 500000000;
    return json;
}

2. 前端改造：避免AngularJS URL安全拦截 #

推荐在拿到接口数据后提前拼接完整的图片Data URL，减少模板中的表达式运算，同时规避Angular的安全校验问题：

修改AngularJS控制器代码 #

var app = angular.module('GrillaDiscos', []);
app.controller('HomeController', function ($scope, $http) {
    $http.get('/Home/Get_discos').then(function (res) {
        $scope.discosdata = res.data.map(function(item) {
            // 提前拼接完整图片地址，若存储的是jpg格式请将image/png改为image/jpeg
            item.fullFotoUrl = 'data:image/png;base64,' + item.foto_dis;
            return item;
        });
    }, function (error) {
        alert('数据加载失败，状态码：' + error.status);
    });
});

修改HTML中的图片标签 #

<td>
    <img ng-src="{{e.fullFotoUrl}}" style="width: 60px; height: 60px; object-fit: cover;" />
</td>

如果修改后仍无法显示，按以下顺序排查：

• 打开浏览器开发者工具，查看Get_discos接口的返回值，确认foto_dis字段是纯Base64字符串，不存在多余的转义符、括号包裹。
• 确认图片MIME类型和实际存储格式匹配：PNG格式用image/png，JPG/JPEG格式用image/jpeg，GIF格式用image/gif。
• 若接口返回的Base64长度超过你设置的MaxJsonLength，可适当调大该值，目前配置的500MB足够支撑绝大多数图片场景。

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