Get Image or byte data with http

by

It is not necessary to extend BrowserXhr anymore. (Tested with angular 2.2.1)
RequestOptionsArgs now has a property responseType: ResponseContentType which can be set to ResponseContentType.Blob

Using DomSanitizer

import {DomSanitizer} from '@angular/platform-browser';

This example also creates a sanitized url that can be bound to the src property of an <img>

this.http.get(url,  {
                        headers: {'Content-Type': 'image/jpg'},
                        responseType: ResponseContentType.Blob
                    })
        .map(res => {
            return new Blob([res._body], {
                type: res.headers.get("Content-Type")
            });
        })
        .map(blob => {
            var urlCreator = window.URL;
            return  this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob));
        })

More Related Contents:

  1. based on mobile number how do i get country code in javascript or anguler 2+ [duplicate]
  2. How do I return the response from an Observable/http/async call in angular?
  3. How to load external scripts dynamically in Angular?
  4. Property ‘…’ has no initializer and is not definitely assigned in the constructor
  5. Angular 5 Service to read local .json file
  6. Angular: Can’t find Promise, Map, Set and Iterator
  7. Wait for multiple promises to finish
  8. Angular2 component’s “this” is undefined when executing callback function
  9. Angular 2: Callback when ngFor has finished
  10. Upgrading to angular-6.x gives “Uncaught ReferenceError: global is not defined”
  11. Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?
  12. How to subscribe to an event on a service in Angular2?
  13. Angular 2 pipe that transforms JSON object to pretty-printed JSON
  14. Angular 2 – How to pass URL parameters?
  15. Angular 6 – process is not defined when trying to serve application
  16. Angular url plus sign converting to space
  17. Correct way Provide DomSanitizer to Component with Angular 2 RC6
  18. How to Pass data from child to parent component Angular
  19. ‘Access-Control-Allow-Credentials’ header in the response is ” which must be ‘true’
  20. How to ‘wait’ for two observables in RxJS
  21. Generate dynamic css based on variables angular
  22. Angular 8 – Lazy loading modules : Error TS1323: Dynamic import is only supported when ‘–module’ flag is ‘commonjs’ or ‘esNext’
  23. Angular 2 Quickstart: unexpected token
  24. Angular 2 runOutsideAngular still change the UI
  25. TypeScript TS7015: Element implicitly has an ‘any’ type because index expression is not of type ‘number’
  26. Angular 2 AuthGuard Service with redirect?
  27. Observable.forkJoin with a for loop
  28. binding data to angular checkbox
  29. How to detect firestore connection failure
  30. iframe inside angular2 component, Property ‘contentWindow’ does not exist on type ‘HTMLElement’

Leave a Comment