Angular 从URL添加图像

我一直试图从Typescript中的URL输入中获得一个图像，但只能在javascript中实现。当用户插入图像URL时，应该会显示预览并能够上传它。我很抱歉没有更多的代码，只是没能弄明白

upload.component.html

input type="URL" id="myURL" placeholder="insert image URL here" (change)="onURLinserted($event) ">

          <button type="button"  class="btn btn-dark btninput"  [disabled]="toogleBool" (click)="onUpload()">Upload</button>

---

下面是答案，Iam使用双向数据绑定来访问您的图像url。并且在图像标签中使用属性绑定来绑定图像

Html文件

<input type="URL" name="myURL" [(ngModel)]="myURL" placeholder="insert image URL here" (change)="onURLinserted() ">

<img [src]="imageToShow" alt="Place image title">

类型脚本文件

imageToShow:any;
myURL:any

onURLinserted() {
      this.getImage(myURL).subscribe(data => {
        this.createImageFromBlob(data);
      }, error => {
        console.log("Error occured",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(); //you need file reader for read blob data to base64 image data.
   reader.addEventListener("load", () => {
      this.imageToShow = reader.result; // here is the result you got from reader
   }, false);

   if (image) {
      reader.readAsDataURL(image);
   }
}

imagestoshow：任何；
myURL：有吗
onurinserted（）{
this.getImage（myURL）.subscribe（数据=>{
此.createImageFromBlob（数据）；
}，错误=>{
console.log（“发生错误”，错误）；
});
}
getImage（imageUrl:string）：可观察{
返回此文件。http
.get（imageUrl，{responseType:ResponseContentType.Blob}）
.map（（res:Response）=>res.blob（））；
}
createImageFromBlob（图像：Blob）{
let reader=new FileReader（）；//您需要文件读取器将blob数据读取到base64图像数据。
reader.addEventListener（“加载”，（）=>{
this.imageToShow=reader.result；//这是您从reader获得的结果
}，假）；
如果（图像）{
reader.readAsDataURL（图像）；
}
}

有关更多详细信息，请访问此链接

我希望这对解决你的问题有帮助

编辑：-

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());
        }

从'@angular/Http'导入{Http，ResponseContentType}；
构造函数（私有http:http）{}
getImage（imageUrl:string）：可观察{
let headers={responseType:ResponseContentType.Blob}
返回此文件。http
.get（图像URL、标题）
.map（（res:Response）=>res.blob（））；
}

---

让我们再试一次，

谢谢您的回答。我不断收到错误，属性“responseType”的类型不兼容。类型“ResponseContentType”不可分配给类型“json”。在.get（imageUrl，{responseType:ResponseContentType.Blob}）中，我更新了我的答案，请检查并像这样使用。我更新了我的答案，请检查并像这样使用，

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());
        }