How to implement PrimeNG Photo Gallery?

Personal greeting,

I'm trying to implement a gallery of images as you can see in the demonstration model of PrimeNG just below;

Gallery

But I'm having difficulty due to lack of experience, please, my goal and implement this library.

That's what's in my database.

WhenIloadthepageitcanalreadyloadthelistofobjectsasyoucanseeinthefigurebelow;

Thisisacomponentclass;

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']})exportclassEventoComponentimplementsOnInit{publictitle:string;publiceventos:Evento[];publicurl;constructor(private_eventoService:EventoService,){this.title='FotosdeEventos';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);});}}

Theproblemisnotmuchinformationinthedocumentation.

THATWASMYTRYING;

MyHTML;

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

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


</div>

On screen it looks like this;

Theslidesaregoingblank,withoutappearingimages,theproblemisIcannotmountthelogic.

Thisismyinterface.

exportclassEvento{constructor(public_id:string,publicname:string,publicdescription:string,publicyear:number,publicimage:string,publicuser:string){}}

IfImountthisway,theimagesappear,butitdoesnotlooklikethePrimeNGlibraryimplementation;

<divclass="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 per the suggestion;

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