Razor视图中Base64字符串作为img src无法加载图片求助

我来帮你排查这个Base64图片加载失败的问题，这在Razor开发里是个很常见的小坑，大概率是因为你的Base64字符串缺少了必要的MIME类型前缀，浏览器根本没法识别这是一张图片！

核心原因分析 #

原生的Base64图片需要在src属性中使用完整的Data URI格式，也就是必须包含data:[图片MIME类型];base64,这个前缀。如果你的ImageDataInfo.ImageData只存了纯Base64编码内容，没有这个前缀，浏览器会把它当成普通文本链接，自然加载不出图片。

修复方案 #

1. 固定图片类型的情况

如果你的图片都是同一种格式（比如PNG），直接在src里拼接前缀即可：

<div style="height:180px;"> 
  <table id="tblheader" style="border:none 0px black;width:100%;background:none;"> 
    <tbody> 
      <tr> 
        @{ 
          foreach (var ImageDataInfo in Model.JobImages.ImageDataInfo) { 
            <td style="border-bottom: 1px solid #000000;"> 
              <img src="data:image/png;base64,@ImageDataInfo.ImageData" style="width:100px;height:100px;align-content:center;" /> 
            </td> 
          } 
        } 
      </tr> 
    </tbody> 
  </table> 
</div>

如果是JPG/JPEG格式，把前缀改成data:image/jpeg;base64,即可。

2. 图片类型不固定的情况

如果你的图片有多种格式，建议在ImageDataInfo模型中新增一个ImageType字段（存储值如png、jpeg、gif），然后动态拼接前缀：

<img src="data:image/@ImageDataInfo.ImageType;base64,@ImageDataInfo.ImageData" style="width:100px;height:100px;align-content:center;" />

额外排查步骤 #

• 验证Base64字符串完整性：把ImageDataInfo.ImageData的内容复制出来，手动加上对应格式的前缀后粘贴到浏览器地址栏，如果能显示图片，说明字符串本身没问题，就是前缀的问题。
• 检查页面渲染结果：右键页面查看源代码，看看生成的img标签src属性内容是否正确，有没有语法错误或者缺失部分。
• 确认循环逻辑：确保Model.JobImages.ImageDataInfo不是空集合，循环能正常渲染出<td>和<img>标签。

内容的提问来源于stack exchange，提问作者Sabarish S A