SQL Server存储的varbinary(max)类型图片在ASP.NET MVC中无法显示求助

常见故障原因 #

• 存储的varbinary(max)内容不是合法的JPG原始二进制流：你提供的字段示例值开头为0x313131，对应ASCII字符为111，而标准JPG文件的二进制头固定为0xFFD8FF，说明你写入数据库时没有直接存入图片的原始二进制，大概率是提前把图片转成了Base64字符串、十六进制字符串之后再转成二进制存入字段，导致内容不符合图片格式要求。
• Razor渲染时引入了无效空格：你现有代码中data:image/jpg;base64,和@Convert.ToBase64String之间有空格，渲染后Base64编码前会多出一个空白字符，浏览器无法识别该格式的data URI。
• API返回的字节数组被二次编码：如果FlImage字段是从第三方API获取，部分序列化框架会自动把byte数组转成Base64字符串再传输，你拿到的FlImage实际是Base64字符串转成的字节数组，再次调用Convert.ToBase64String相当于二次编码，结果自然不合法。

对应解决方案 #

1. 校验并修正数据库存储逻辑
   首先执行SQL语句校验字段内容头：

SELECT SUBSTRING(FlImage, 1, 3) FROM 你的表名 WHERE 匹配条件

如果返回结果不是0xFFD8FF，说明存储逻辑错误，修改写入逻辑：直接将图片读取到的原始二进制流写入varbinary(max)字段，不要做多余的编码转换。
如果确认是把十六进制字符串转成二进制存入的，需要在读取后先转成十六进制字符串，再转成原始图片二进制：

// 示例：把存的十六进制二进制转成原始图片二进制
var hexString = Encoding.ASCII.GetString(item.FlImage).TrimStart('0','x');
byte[] actualImageBytes = Enumerable.Range(0, hexString.Length)
                         .Where(x => x % 2 == 0)
                         .Select(x => Convert.ToByte(hexString.Substring(x, 2), 16))
                         .ToArray();

2. 修正cshtml渲染代码
   去掉多余空格，同时用Html.Raw避免Razor自动转义特殊字符：

<img alt="image" src="data:image/jpg;base64,@Html.Raw(Convert.ToBase64String(item.FlImage))" height="200" width="200" />

3. 校验API返回数据合法性
   在控制器中打断点查看item.FlImage的前3位数值，正常JPG应该为255, 216, 255，如果不符合说明API序列化逻辑有问题，调整API逻辑直接返回原始字节数组即可。

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