Get SVG from http GET method and display it - html

Question

I'm trying to display a SVG image in my webapp but I don't own the SVG as a file "image.svg", I call my service and it responds with a http response. The response is as below :
"headers": {
"access-control-allow-methods": [
"PUT"
],
"content-length": [
"249664"
],
"x-powered-by": [
"Express"
],
"content-disposition": [
"attachment; filename=out.svg"
],
"etag": [
"W/\"3cf40-pgVjFGaVCiK8oIvC+f36ew7CrB8\""
],
"access-control-allow-headers": [
"Content-Type, Authorisation"
],
"connection": [
"keep-alive"
],
"access-control-allow-origin": [
"*"
],
"date": [
"Fri, 22 Nov 2019 14:06:47 GMT"
],
"content-type": [
"text/html; charset=utf-8"
]
},
"body": "PHN2ZyB4bWxucz0iaHR0cDovL3 [...] 5lPjwvc3ZnPg=="
I already try to use an object tag with the [data] attribute and passing the content of the body in that [data] field, but the result is not as excepted (it's my webapp but in a litle window... I don't understand)
Is there a way to display that SVG without downloading it as a file ?

Answer 1

You need to use DomSanitizer for sanitizing your base64 image. Import DomSanitizer and use in HTML as follows,
TS
import { Component } from '#angular/core';
import { DomSanitizer } from '#angular/platform-browser';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
// variable containing image string (base64)
// in your case body of response
svgData = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
constructor(public sanitizer: DomSanitizer) { } // inject domsanitizer
}
HTML
<img [src]="sanitizer.bypassSecurityTrustResourceUrl('data:image/svg+xml;base64, '+ svgData)">
Demo Stackblitz