点击编辑按钮后，Ajax调用获取二进制图片无法转换预览的解决方法

我来帮你搞定这个图片显示的问题！核心问题出在直接通过JSON传输二进制数据——JSON是文本格式，二进制数据在转成JSON字符串的过程中会出现编码丢失或转义错误，导致前端没法还原成正常图片。下面是具体的解决步骤：

第一步：后端接口修改（关键！） #

在你的/Home/EditUser接口里，不要直接把二进制图片数据塞进JSON返回，而是先把二进制转换成Base64编码的字符串，再作为JSON的一个字段返回。

举个C#的例子（假设你用ASP.NET）：

// 从数据库获取二进制图片字节数组
byte[] imageBytes = GetImageFromDatabase(userId);
// 转成Base64字符串
string imageBase64 = Convert.ToBase64String(imageBytes);
// 构建返回的JSON对象
var result = new {
    // 其他用户字段...
    imageBase64 = imageBase64,
    imageMimeType = "image/png" // 要和实际图片类型匹配，比如image/jpeg
};
// 返回JSON
return Json(result);

第二步：前端Ajax回调修改 #

拿到后端返回的JSON后，用Base64字符串构建图片的data URI，直接赋值给预览图片的src属性：

修改你的Edit函数里的success回调：

function Edit(id) {
    $("#submit").html("Update Record");
    $.ajax({
        type: 'GET',
        url: '/Home/EditUser',
        data: { userid: id },
        success: function (data) {
            var obj = typeof data === 'object' ? data : JSON.parse(data);
            $("#imgPreview").show();
            // 构建data URI格式的图片地址
            var imgSrc = `data:${obj.imageMimeType};base64,${obj.imageBase64}`;
            // 给预览图片设置src
            $("#imgPreview").attr('src', imgSrc);
            // 其他表单赋值逻辑...
            // 注意：file控件无法直接通过html()赋值，若要显示文件名需单独处理
        }
    });
}

额外注意事项 #

• 图片类型匹配：后端返回的imageMimeType必须和实际图片类型一致（比如JPG是image/jpeg，PNG是image/png），否则图片可能无法正常渲染。
• 大图片优化：如果图片体积很大，Base64编码会让数据体积增加约30%，这时候更推荐单独写一个图片接口（比如/Home/GetUserImage?userid=id），直接返回图片流，然后前端把预览图的src设为这个接口地址：

  $("#imgPreview").attr('src', `/Home/GetUserImage?userid=${id}`);
  

  这种方式不需要转Base64，效率更高。

内容的提问来源于stack exchange，提问作者Zahid Qamar ZQ