Here's a solution for you: I utilized two-way data binding to access your image URL and property binding in the image tag to bind your image.
HTML File,
<input type="URL" name="myURL" [(ngModel)]="myURL" placeholder="insert image URL here" (change)="onURLinserted() ">
<img [src]="imageToShow" alt="Place image title">
Typescript File,
imageToShow:any;
myURL:any
onURLinserted() {
this.getImage(myURL).subscribe(data => {
this.createImageFromBlob(data);
}, error => {
console.log("Error occurred", error);
});
}
getImage(imageUrl: string): Observable<File> {
return this.http
.get(imageUrl, { responseType: ResponseContentType.Blob })
.map((res: Response) => res.blob());
}
createImageFromBlob(image: Blob) {
let reader = new FileReader(); //file reader needed to read blob data to base64 image data.
reader.addEventListener("load", () => {
this.imageToShow = reader.result; // result obtained from reader
}, false);
if (image) {
reader.readAsDataURL(image);
}
}
For more information, you can visit this link.
Getting Image from API in Angular 4?
Hope this helps to solve your issue.
Edit:-
import { Http,ResponseContentType } from '@angular/http';
constructor(private http: Http){}
getImage(imageUrl: string): Observable<File> {
let headers={ responseType: ResponseContentType.Blob }
return this.http
.get(imageUrl, headers)
.map((res: Response) => res.blob());
}
Give it another try,