Working with API endpoints that require authentication for image retrieval. Utilizing a service called authenticatedHttp as an abstraction over $http to manage authentication tokens successfully.
Successfully receiving response, converting blob to object URL. Validation confirmed on correct blob output.
Encountering issue when trying to apply objectUrl to src. Attempted simplified example without authentication in Angular app, works in vanilla JS.
Not well-versed in ObjectUrl, noticing that inspecting empty image shows correct src, clicking link redirects through ui-router.
Seeking insights on why this is happening and how to resolve it?
app.directive('authenticatedSrc', ['authenticatedHttp', function (authenticatedHttp) {
var directive = {
link: link,
restrict: 'A'
};
return directive;
function link(scope, element, attrs) {
var requestConfig = {
cache: 'false'
};
authenticatedHttp.get(attrs.authenticatedSrc, requestConfig).then(function(response) {
var objectUrl = window.URL.createObjectURL(new Blob([response.data], { type: 'image/png' }));
attrs.$set('src', objectUrl);
});
}
}]);