AngularJS中展示任意扩展名base64格式图片的解决方案咨询

核心思路 #

你当前拿到的非标准base64字符串缺失了标准base64的:、;、,分隔符，我们可以通过正则匹配提取图片MIME类型，再拼接成浏览器可识别的标准图片base64格式即可。

步骤1：在AngularJS控制器/服务中新增处理方法 #

$scope.getValidImageSrc = function(rawBase64Str) {
  // 兼容标准格式base64，已经符合要求直接返回
  if (rawBase64Str.includes(';base64,')) {
    return rawBase64Str;
  }
  // 匹配提取图片类型
  const mimeMatch = rawBase64Str.match(/^dataimage\/(.*?)base64/);
  if (mimeMatch && mimeMatch[1]) {
    const imgType = mimeMatch[1];
    // 提取纯base64数据段
    const base64Data = rawBase64Str.replace(/^dataimage\/.*?base64/, '');
    // 拼接成标准base64图片地址
    return `data:image/${imgType};base64,${base64Data}`;
  }
  // 匹配失败兜底，可替换为你的项目默认占位图路径
  return 'assets/default-placeholder.png';
}

步骤2：修改HTML模板绑定 #

如果你使用的是AngularJS 1.x版本，建议使用ng-src避免解析前的无效请求，写法如下：

<img ng-src="{{getValidImageSrc(mybase64variable)}}" />

如果你使用的是Angular 2+版本，直接修改原[src]绑定即可：

<img [src]="getValidImageSrc(mybase64variable)" />

优化建议 #

• 如果存储环节可修改，建议把图片MIME类型单独存入数据库字段，加载时直接拼接即可，无需正则匹配，性能更高
• 可根据实际拿到的base64字符串格式调整正则规则，适配更多异常格式场景

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