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>

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

ИлиВы можете создать компонент, который будет получать через Inputs s3_url и свойства изображения.

Вот пример stackblitz