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>

Answer 2

您的示例无效，因为您错过了标记中的 src 属性。这是一个固定的示例：

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

除了使用Pipe之外，您还可以在打字稿中编写简单的函数，然后将其导出并导入将要使用它的类中。

   export function getImageUrl(urlPrefix: string, urlSuffix: string) {
     return urlPrefix + urlSuffix; 
   }

或者您可以创建将通过输入s3_url和image属性接收的组件。

以下是stackblitz

上的示例

Angular：如何为图像创建自定义管道？

2 个答案: