How to implement Primeng Photo Gallery?

Question

Personal greeting,

I’m trying to implement an image gallery as you can see in the Primeng demo template below;

Gallery

However I am having difficulty due to lack of experience, please my goal and implement this library.

This is the information is in my database

When I load the page it can already load the list of objects as you can see in the picture below;

This is the class of the component;

import { environment } from './../../../environments/environment';
import { EventoService } from './../../core/evento.service';
import { Evento } from './../../models/evento';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-evento',
  templateUrl: './evento.component.html',
  styleUrls: ['./evento.component.css']
})
export class EventoComponent implements OnInit {

  public title: string;
  public eventos: Evento[];
  public url;

  constructor(
    private _eventoService: EventoService,
  ) {
      this.title = 'Fotos de Eventos';
      this.url = environment.url;
  }

  ngOnInit() {
    this.getEventos();
  }


  getEventos() {
    this._eventoService.getEventos().subscribe(
      response => {
        if (!response.eventos) {

        } else {
          this.eventos = response.eventos;
        }
      },
      error => {
        console.log(<any>error);
      }
    );
  }


}

The problem and does not have much information in the documentation.

THAT WAS MY ATTEMPT;

My HTML;

<div class="col-lg-12">
    <h1>{{title}}</h1>

       <form >
          <p-galleria [images]="eventos" panelWidth="500" panelHeight="313" [showCaption]="true"></p-galleria>
      </form>


</div>

On screen it looked like this;

The slides are passing blank, no images appear, the problem is I’m not able to assemble the logic.

This is my interface.

export class Evento {
    constructor (
        public _id: string,
        public name: string,
        public description: string,
        public year: number,
        public image: string,
        public user: string
     ) {}
}

If I assemble like this the images will appear, but it is not as in the implementation of the Primeng library;

<div class="col-lg-12" [@fadeIn]>
    <h1>{{title}}</h1>

  <div class="col-lg-3" *ngFor="let evento of eventos">
    <div class="thumbnail">
      <div class="animal-image-mask">
        <img src="{{ url + 'get-image-evento/' + evento.image }}" alt="{{evento.name}}" *ngIf="evento.image">
        <img src="http://via.placeholder.com/270x200" alt="{{evento.name}}" *ngIf="!evento.image">
       </div>

    </div>
  </div>

</div>

I did as I suggested;

I put it like this;

getEventos() {
    this._eventoService.getEventos().subscribe(
      response => {
        if (!response.eventos) {

        } else {
          this.eventos = response.eventos.map(evento => {
            return {
              source: evento.image,
              alt: evento.description,
              title: evento.name
             }
           });
        }
      },
      error => {
        console.log(<any>error);
      }
    );
  }

Answer 1

Try mapping to the interface it uses in the documentation.

else {
      this.eventos = response.eventos.map(evento=>{
       return {
         source:  this.url + 'get-image-evento/' + evento.image ,
         alt: evento.description,
         title: evento.name
        }
      });
}