Question

我正在将图像从上传器保存到数据库中，因此对我来说是完美的工作，但问题是我是否要在网站上显示该图像，以便如何显示它们，图像路径也应显示为{{1} }。请给我任何示例/解决方案。

TS

src="http://www.example.com/image.png"

Service.Ts

imageUrl: string = "/assets/img/default-image.png";
  fileToUpload: File = null;
  constructor(private imageService: ImageUploadService) { }

  handleInputFile(file: FileList){
    this.fileToUpload = file.item(0);
    var reader = new FileReader();
    reader.onload = (event:any) => {
      this.imageUrl = event.target.result;
    }
    reader.readAsDataURL(this.fileToUpload);
  }

  OnSubmit(Caption,Image){
    this.imageService.postFile(Caption.value, this.fileToUpload).subscribe(
      data => {
        console.log("Done");
        Caption.value = "";
        Image.value = "";
      }
    );
  }

HTML

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

Answer 1

我正在共享项目中的代码。在此示例中，

我有一个API，可以使用customerNumber对其进行调用，该API返回我的blob类型数据。然后，我将这些数据从服务返回到我的组件。在我的组件方面，我将这些数据作为blob并使用Image函数将其转换为this.createImageFromBlob类型。最后，我通过使用imageToShow.photo标签中的<img [src]="imageToShow.photo">变量在模板侧显示该图像。

我的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;
  }

我的component.ts端

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

并在您的组件中将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);
    }
  }

和我的template.html端

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

请随时询问您是否不了解任何要点。

Answer 2

这是我以前从数据库读取图像的方式。

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

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

在组件中使用服务将private sanitizer: 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' >

更新：我以base64格式创建了一个演示显示图像，该图像存储在json文件中。 https://stackblitz.com/edit/display-image-from-api

如何获取图像并在我的页面中显示角度6

2 个答案: