Question

我从服务器获得jpeg图像获取请求的响应（使用CORS）： ÿØÿàJFIFÿÛ（％！1“％）+ .............

将此转换为base64之后，使用btoa（encodeURIComponent（data））看起来像：数据：图像/ JPEG; BASE64，JUVGJUJGJUJEJUVGJUJGJUJEJUVGJUJGJUJEJUVGJUJGJUJEJTAwJTEwSkZJRiUwMCUwMSUwMSUwMSUwMEglMDBIJTAwJTAwJUVGJUJGJUJEJUVGJUJGJUJEJTAwJUVGJUJGJUJERXhpZiUwMCUwME1NJTAwKiUwMCUwMCUwMCUwOCUwMCUw ...............................

在将img标签src属性设置为上面的base64时，图像不会在浏览器中呈现。

但是，当我在浏览器选项卡中打开图像链接时，它会正确加载。此外，在邮递员发送相同的请求时，它会在邮递员的回复中呈现图像。

即使使用blob方法也行不通（使用了bower：angular-img-http-src）

$scope.$watch('objectURL', function (objectURL) {
    elem.attr('src', objectURL);
});

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

$http.get(url)
    .then(function (response) {
            var blob = new Blob(
                        [ response.data ], 
                        { type: response.headers('Content-Type') }
                    );

            $scope.objectURL = URL.createObjectURL(blob);

});

请在此帮忙。

Answer 1

在服务中：

yourService : function(options) {

return $http.get(url, {
                    responseType : 'arraybuffer'
                }

        ).success(function(data) {
            var file = new Blob([ data ], {
                type : 'image/jpeg'
            });
            var fileURL = URL.createObjectURL(file);

            if(options && options.successCallBack) {
                return options.successCallBack(fileURL, {});
            }
        });
    },

在控制器中：

function yourImageSuccessHandler(fileUrl, options) {
            $scope.objectUrl= fileUrl; // now you will have fileUrl in 
                                      // controller
        }
        yourService.getDownloadDoc(empId, {
            successCallBack: yourImageSuccessHandler
        });

在模板HTML中：

<img ng-src={{objectUrl}}></img>

Answer 2

虽然我不知道是否有特定的角度例程，但创建图像的一般JS解决方案就是这样......

function addIMG(durl, callback) {
    var img = new Image();
    img.addEventListener('load', function() {
        callback(this);
    }, false);
    img.src = durl;
}

addIMG(objectURL, function(img) {
    $('#element').appendChild(img);
});

希望有所帮助：）

图像未显示在html图像标记中

2 个答案:

在服务中：

在控制器中：

在模板HTML中：