javascript - Angular:如何为图像创建自定义管道？

Question

我正在Angular 6中创建一个图库项目。

我在AWS S3存储桶中有一个包含大量图像的文件夹。

在api家伙给我这个回应。请看一下：

{
  "s3_url": "http://s3-us-east-1.amazonaws.com/*****/",
  "images": [
    {
      "title": "John",
      "image": "john.png",
      "description": "lorem ipsum dolor sit amet",
      "created": "2018-12-04 00:25:00"
    },
    {
      "title": "Marry",
      "image": "marry.png",
      "description": "lorem ipsum dolor sit amet",
      "created": "2018-12-04 00:26:00"
    },
    {
      "title": "Kenny",
      "image": "kenny.png",
      "description": "lorem ipsum dolor sit amet",
      "created": "2018-12-04 00:27:00"
    },
    {
      "title": "Dale",
      "image": "dale.png",
      "description": "lorem ipsum dolor sit amet",
      "created": "2018-12-04 00:28:00"
    },
    {
      "title": "Omega",
      "image": "omega.png",
      "description": "lorem ipsum dolor sit amet",
      "created": "2018-12-04 00:29:00"
    }
  ]
}

我的代码是：

<div *ngFor="let image of data.images">
 <img class="img img-circle" src="{{ data.s3_url }}{{ image.image }}" alt="{{ image.title }}" />
 <p>
  {{ image.description }}
 </p>
</div>

我不想使用{{ data.s3_url }}{{ image.image }}。我想了解自定义管道。

如何在页面上显示照片。

我无法在任何地方找到答案。

在此先感谢您的帮助。

Answer 1

有很多显示图像的方法。如果要在pipe的帮助下显示图像，请尝试这种方式。

image.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'imagePipe' })
export class ImagePipe implements PipeTransform {
    transform(value: string, urlPrefix: string): string {
        return urlPrefix + value;
    }
}

app.component.html

<div *ngFor="let image of data.images">
 <img class="img img-circle" 
      src="{{image.image | imagePipe: data.s3_url }}" 
      alt="{{ image.title }}"/>
 <p>
  {{ image.description }}
 </p>
</div>