Base64转图片返回Bitmap导致jQuery DataTable图片无法显示

核心问题根因 #

后端返回数据格式错误 #

你当前使用的Base64StringToImage方法返回System.Drawing.Image（Bitmap）对象，这类GDI+专用对象根本无法通过JSON接口正常传递到前端：序列化结果只会输出对象的内部属性（比如图片尺寸、格式标识），前端拿不到可直接用来渲染的图片字符串数据，自然没法正常显示图片。
另外这个方法本身还有冗余代码：初始化MemoryStream的时候已经把图片字节写进内存了，后续重复执行ms.Write(imageBytes, 0, imageBytes.Length) 完全是无效操作，不产生实际作用。

前端渲染逻辑拼接错误 #

当前的img标签路径拼接有明显bug：

• 你拼出来的imgsrc本身就是浏览器可以直接解析的Data URI格式，却多此一举在src前面加了/media/路径前缀，会导致浏览器真的去服务器请求/media/data:image/png;base64,xxx 这个根本不存在的资源，直接404，图片肯定加载不出来。

修复方案 #

后端调整 #

完全没必要在后端做Base64到Image对象的转换：数据库存的原始Base64字符串是什么格式，就原样当接口返回的EmpPhoto字段值，序列化了传给前端就行。
如果需要校验Base64字符串是不是有效图片，只需要做字节数组的解析校验，校验通过后还是返回原Base64字符串，千万不要返回Image类型的对象。

前端DataTable渲染调整 #

删掉多余的路径前缀，加上空值判断优化，修正后的配置代码：

{
    'data': 'EmpPhoto',
    "render": function (data, type, row, meta) {
        // 空值判断，避免没数据的时候出裂图
        if (!data) return '<span>暂无照片</span>';
        // 拼完整的Data URI，不要加任何额外的服务器路径
        const imgSrc = `data:image/png;base64,${data}`;
        return `<img src="${imgSrc}" style="height: 100px; width: 100px; object-fit: cover;" alt="员工照片">`;
    }
}

额外注意事项 #

• 如果接口返回的EmpPhoto字段本身已经带了data:image/xxx;base64, 前缀，前端就不要重复拼这段前缀了，直接把字段值赋给img的src就行。
• 如果图片实际不是png格式（比如jpg、jpeg），只要把Data URI里的MIME类型改成对应格式就可以，不影响正常加载。
• 对Data URI格式的图片src，绝对不要加任何服务器路径前缀，这类资源是浏览器本地解析的，根本不需要发服务器请求。

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