Angular4显示来自服务器的图像 [英] Angular4 show image from server

问题描述

我想在img标签中显示图像: 我就是这样

I want to show an image in img tag : i am doing it that way

组件

this.file.url=this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.file.url));

模板

<img [src]="file.url">

我收到此错误

ERROR TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

推荐答案

您应该在GET-Request设置中设置responseType: ResponseContentType.Blob，因为这样您就可以将图像获取为Blob，并在以后通过base64编码的源进行转换.您上面的代码不好.如果您想正确执行此操作，请创建单独的服务以从API获取图像.因为在组件中调用HTTP请求不是很好.

You should set responseType: ResponseContentType.Blob in your GET-Request settings, because so you can get your image as blob and convert it later da base64-encoded source. You code above is not good. If you would like to do this correctly, then create separate service to get images from API. Beacuse it ism't good to call HTTP-Request in components.

这是一个可行的示例:

创建image.service.ts并输入以下代码:

    getImage(imageUrl: string): Observable<File> {
        return this.http
            .get(imageUrl, { responseType: ResponseContentType.Blob })
            .map((res: Response) => res.blob());
    }

现在，您需要在image.component.ts中创建一些函数以获取图像并将其显示为html.

Now you need to create some function in your image.component.ts to get image and show it in html.

要从Blob创建图像，您需要使用JavaScript的FileReader. 这是创建新的FileReader并侦听FileReader的load-Event的函数.结果，此函数返回base64编码的图像，您可以在img src-attribute中使用该图像:

For creating an image from Blob you need to use JavaScript's FileReader. Here is function which creates new FileReader and listen to FileReader's load-Event. As result this function returns base64-encoded image, which you can use in img src-attribute:

imageToShow: any;

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

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

如果只有一个图像，则可以将imageToShow[] = []定义为数组.现在，您可以简单地将reader.result推入该数组.例如:this.imageToShow.push(reader.result).在您的模板中，您可以使用*ngFor="let image of imageToShow;"迭代并输出此数组.

If you have more then one image, you can define imageToShow[] = [] as array. And now you can simple push reader.result to this array. For example: this.imageToShow.push(reader.result). In your template you can iterate and output this array with *ngFor="let image of imageToShow;".

现在，您应该使用创建的ImageService从api获取图像.您应该订阅数据并将此数据提供给createImageFromBlob -function.这是一个示例函数:

Now you should use your created ImageService to get image from api. You should to subscribe to data and give this data to createImageFromBlob-function. Here is an example function:

getImageFromService() {
      this.isImageLoading = true;
      this.imageService.getImage(yourImageUrl).subscribe(data => {
        this.createImageFromBlob(data);
        this.isImageLoading = false;
      }, error => {
        this.isImageLoading = false;
        console.log(error);
      });
}

现在，您可以像下面这样在HTML模板中使用imageToShow变量:

Now you can use your imageToShow-variable in HTML template like this:

<img [src]="imageToShow"
     alt="Place image title"
     *ngIf="!isImageLoading; else noImageFound">
<ng-template #noImageFound>
     <img src="fallbackImage.png" alt="Fallbackimage">
</ng-template>

我希望此说明易于理解，并且可以在您的项目中使用.

I hope this description is clear to understand and you can use it in your project.

这篇关于Angular4显示来自服务器的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！