如何通过Blob图片URL显示图片？已尝试createObjectURL()方法

我看你这段代码里有几个关键问题，咱们一步步来修正：

问题1：没必要把Base64 Data URL转成Blob URL #

你的path已经是完整的Base64格式的Data URL（data:image/jpeg;base64,...），这种格式可以直接作为图片的src使用，完全不需要再转成Blob URL，多做了无用功。

问题2：Blob构造方式错误 #

就算你非要转Blob，当前的写法也不对——你直接把Base64字符串塞进Blob了，但Blob需要的是二进制数据，不是编码后的字符串。正确的做法是先把Base64解码成Uint8Array，再传入Blob构造函数。

问题3：Angular中操作DOM的方式不对 #

你用jQuery直接设置ng-src属性，Angular的双向绑定机制不会识别这个手动修改，应该把图片URL绑定到$scope变量上，让Angular自己更新视图。

正确方案1：直接使用Base64 Data URL（最简单） #

修改你的代码，直接把path赋值给绑定的变量：

$scope.preview = function(path) { 
    // path本身就是可直接使用的Data URL
    $scope.previewImageUrl = path; 
}

然后在HTML里这样写：

<img class="image-preview" ng-src="{{previewImageUrl}}" alt="预览图">

正确方案2：如果一定要转成Blob URL（正确解码方式） #

如果你因为某些原因必须用Blob URL，那得先解码Base64：

$scope.preview = function(path) { 
    // 先提取Base64部分（去掉前面的data:image/jpeg;base64,）
    var base64Str = path.split(',')[1];
    // 解码Base64成二进制数组
    var byteCharacters = atob(base64Str);
    var byteNumbers = new Array(byteCharacters.length);
    for (var i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    var byteArray = new Uint8Array(byteNumbers);
    
    // 创建正确的Blob
    var file = new Blob([byteArray], { type: 'image/jpeg' }); 
    var fileURL = URL.createObjectURL(file); 
    
    // 绑定到scope变量，让Angular更新视图
    $scope.previewImageUrl = fileURL;
}

HTML同样用ng-src="{{previewImageUrl}}"即可。

另外提醒一下：使用Blob URL后，记得在合适的时机（比如视图销毁时）调用URL.revokeObjectURL(fileURL)释放内存，避免内存泄漏哦。

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