Angular 如何获取图像并在我的页面中显示

我正在将上传程序中的图像保存到数据库中，因此它对我来说非常适合，但问题是，如果我想在我的网站中显示该图像，那么如何显示它们以及图像路径应该显示为

src=”http://www.example.com/image.png“

。 请给我任何例子/解决方案

TS

服务

postFile(caption: string, fileToUpload: File){
    const endpoint = 'http://localhost:3343/api/UploadImage';
    const formData: FormData = new FormData();
    formData.append("Image", fileToUpload, fileToUpload.name);
    formData.append("Caption", caption);
    return this.http.post(endpoint,formData);
  }

HTML

说明文字
提交
发送

我正在分享我的项目代码。在这个例子中

我有一个API，我用

customerNumber

调用它，它返回我

blob

类型数据。我将这些数据从服务返回到我的组件，在我的组件端，我将这些数据作为blob，并使用

this.createImageFromBlob

函数将其转换为

Image

类型。最后，我使用

标记中的

imageToShow.photo

变量在模板侧显示该图像

My service.ts侧，

  getCustomerImages(customerNumber: number, type: string): Observable<File> {
    let result: Observable<any> = this.http
      .get(`${this.apiBaseUrl}csbins/Customer/${customerNumber}/images`, { responseType: "blob" });
    return result;
  }

  getCustomerImages() {
    this.isImageLoading = true;
    this.getCustomerImagesSubscription = this.getCustomerService.getCustomerImages(this.refNo).subscribe(
      data => {
        this.createImageFromBlob(data);
        this.isImageLoading = false;
      },
      error => {
        this.isImageLoading = false;
      });
  }

          <ng-template [ngIf]="imageTypeShow">
              <ng-template [ngIf]="imageToShow.photo">
                  <img [src]="imageToShow.photo" class="img-thumbnail" *ngIf="!isImageLoading;">
              </ng-template>
          </ng-template>

并将blob转换为组件中的图像

  createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener("load",
      () => {
          this.imageToShow.photo = reader.result;
      },
      false);

    if (image) {
      if (image.type !== "application/pdf")
        reader.readAsDataURL(image);
    }
  }

和my template.html端，

  getCustomerImages(customerNumber: number, type: string): Observable<File> {
    let result: Observable<any> = this.http
      .get(`${this.apiBaseUrl}csbins/Customer/${customerNumber}/images`, { responseType: "blob" });
    return result;
  }

  getCustomerImages() {
    this.isImageLoading = true;
    this.getCustomerImagesSubscription = this.getCustomerService.getCustomerImages(this.refNo).subscribe(
      data => {
        this.createImageFromBlob(data);
        this.isImageLoading = false;
      },
      error => {
        this.isImageLoading = false;
      });
  }

          <ng-template [ngIf]="imageTypeShow">
              <ng-template [ngIf]="imageToShow.photo">
                  <img [src]="imageToShow.photo" class="img-thumbnail" *ngIf="!isImageLoading;">
              </ng-template>
          </ng-template>

---

如果您不理解任何一点，请随时询问。

这是我从数据库中读取图像的方式

在服务中创建方法以从数据库获取映像

getImage(path: string){
        return  this.http.get('/api/image?name=' + encodeURIComponent(path));
}

在组件中使用服务 将

专用消毒剂：DomSanitizer

添加到构造函数组件

 this.imageService.getImage(this.path).
                subscribe((data: any) => {

                            let objectURL = 'data:image/png;base64,' + data.Image;
             this.image = this.sanitizer.bypassSecurityTrustUrl(objectURL);

            }, (err) => {
                console.log('HttpErrorResponse error occured.');
            });

在HTML文件中显示

<img id="myimage" [src]='image' >

更新： 我从存储在json文件中的base64格式创建了一个演示显示图像。

---

我在回答中做了一个演示，你可以看一下