如何使用AngularJS在网页中显示Blob图片？

我来帮你搞定这个问题！你遇到的情况在AngularJS里挺常见的——虽然控制台能生成Blob URL，但AngularJS出于安全机制的限制，会拦截未被信任的资源链接，导致图片没法正常显示。下面是具体的解决方法：

1. 用$sce服务信任Blob URL #

AngularJS的**严格上下文转义（SCE）**会默认阻止未标记为安全的资源加载，所以你需要把Blob生成的URL手动标记为可信任的资源：

控制器代码 #

// 假设你的AngularJS模块是app
app.controller('ImagePreviewController', ['$scope', '$sce', function($scope, $sce) {
  // 这里替换成你已有的Blob对象
  const imageBlob = new Blob([你的图片数据], { type: 'image/png' }); // 注意指定正确的MIME类型
  const blobUrl = URL.createObjectURL(imageBlob);
  
  // 把Blob URL标记为安全的资源链接
  $scope.trustedImageUrl = $sce.trustAsResourceUrl(blobUrl);
}]);

视图代码 #

一定要用ng-src而不是普通的src，因为AngularJS需要先解析表达式再加载图片：

<img ng-src="{{trustedImageUrl}}" alt="图片预览">

2. 确认Blob的MIME类型正确 #

如果图片还是显示不出来，先检查创建Blob时的MIME类型是否和图片格式匹配，比如PNG图用image/png，JPG图用image/jpeg，错误的类型会导致浏览器无法解析Blob内容。

3. 记得清理Blob URL避免内存泄漏 #

当页面销毁或者不再需要这个图片时，要手动释放Blob URL，防止内存浪费：

$scope.$on('$destroy', function() {
  URL.revokeObjectURL(blobUrl);
});

如果还是有问题，可以看看控制台有没有安全相关的报错，或者检查Blob数据本身是否完整——比如控制台能生成图片，说明Blob数据是没问题的，大概率是AngularJS的SCE限制导致的，按上面的步骤处理应该就能解决啦！

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