以角度 6 绑定来自服务的图像

Posted 2023-03-05

【中文标题】以角度 6 绑定来自服务的图像

【英文标题】：Bind image from service in angular 6

【发布时间】：2019-02-28 06:42:23

【问题描述】：

我有一个端点，可以根据特定参数为我提供图像。它不是图片网址，而是普通图片。因此，当我在邮递员中到达终点时，作为响应，我会收到一张图片 (JPG)。

我是否在变量中接收此图像并将其绑定到 html 标记中？

所有问题都有将图像 url 映射到图像的解决方案，而我的问题是我必须在 UI 中显示的图像。

show-image-component.ts

this.appservice.getImage().subscribe((image) => 
    console.log(image);
 
)

service.ts

getImg() 

 return this.httpClient.get('xyz.com', headers: this.httpHeaders);

 

我应该如何在 HTML 的 image 变量中显示我收到的图像？

【问题讨论】：

你试过什么？我的猜测是您需要将响应映射到数据 URI 以用作 HTML 中的图像源。

我认为你不能只使用 URL 作为图片标签的src？

【参考方案1】：

您可以在这篇博文中找到有关如何实现此目的的详细步骤 -> https://blog.mikehodnick.com/angular-download-image-blob-and-bind-to-img/

TL;DR - 总而言之，您需要执行以下操作：

（请注意，这是使用 Angular 4.1.3 实现的）

使用 http 获取图像 将响应类型设置为BLOB，以便我们得到二进制格式的图像 清理 blob 响应 将净化后的响应分配给service.ts 文件中的成员变量 在 HTML 视图中将成员变量分配给 src 属性 利润 :D

来自以上链接博客文章的示例代码：

查看

<img [src]="imageData">

组件

import  Component, OnInit  from '@angular/core';
import  Http, ResponseContentType  from '@angular/http';
import  DomSanitizer, SafeUrl  from '@angular/platform-browser';
import 'rxjs/add/operator/toPromise';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html'
)
export class AppComponent implements OnInit 

  imageData: any;

  constructor(private http: Http, private sanitizer: DomSanitizer) 
  

  ngOnInit() 
    const imageUrl = 'http://where.your.images/are/hosted.jpg';

    this.http.get(imageUrl, 
      responseType: ResponseContentType.Blob
    )
      .toPromise()
      .then((res: any) => 
        let blob = new Blob([res._body], 
          type: res.headers.get("Content-Type")
        );

        let urlCreator = window.URL;
        this.imageData = this.sanitizer.bypassSecurityTrustUrl(
            urlCreator.createObjectURL(blob));
      );
  

【参考方案2】：

在 Angular 6+ 上你可以试试这个

关于服务：

import  DomSanitizer  from '@angular/platform-browser';
import  HttpClient, HttpHeaders  from '@angular/common/http';

...

constructor(private http: HttpClient, private sanitizer: DomSanitizer) 


getFile(url: string): any 

  return this.http.get(url, 
    responseType: 'blob'
  )
  .pipe(
    map((res: any) => 
      const urlCreator = window.URL;
      return this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(res));
    )
 );

在组件上：

const imgSrc: any;

downloadFile(uri) 
  this.service.getFile(uri).subscribe((res: any) => 
  this.imgSrc = res;
);

在模板上：

<img id="myImg" [src]="imgSrc"  style="width: 100%">
<button type="button" (click)="downloadFile('YourFile/Url')" id="imgBtn">