How to make a single component have the same image like the link path (Angular)

The first is I already make my character list to have an image loop for each name, in my assets I have images 1,2,3, and until 10.jpg.

I make it like this for the list :

import { Component, OnInit } from '@angular/core';
import { ActorService } from 'src/app/core/services/actor.service';

@Component({
  selector: 'app-actor-list',
  template: `
    <section class="section">
      <div class="container">
        <div class="columns is-multiline" *ngIf="actors">
          <div class="column is-4" *ngFor="let actor of actors; let i = index">
            <div class="card">
              <div class="card-content">
                <a [routerLink]="'' + (i+1)" ></a>
                <figure class="image is-4by3 mt-6">
                  <img src="./assets/img/.jpg"  alt="">
                </figure>
                <p><br>Height : </p>
                <p>Birth Year : </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  `,
  styles: [
  ]
})
export class ActorListComponent implements OnInit {
  actors;

  constructor(private actorService: ActorService) { }

  async ngOnInit() {
    this.actors = await this.actorService.getActors()
    console.log(this.actors)
  }

}

But on the single one that if we click the first actor ex. Luke Skywalker I wanted to be image one only appear and so on. And this is for the actor-single component

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ActorService } from 'src/app/core/services/actor.service';

@Component({
  selector: 'app-actor-single',
  template: `
    <section class="section">
      <div class="container">
        <div class="card" *ngIf="actor">
          <section class="hero is-info">
            <div class="hero-body">
              <h1 class="title is-1 ml-4 mb-6"></h1>
            </div>
          </section>

            
          <div class="message-body" *ngFor=" let i = index">
              <figure class="image is-4by3 mt-6">
                <img src="./assets/img/'.jpg"  alt="">
              </figure>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Height : </h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Mass : </h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Hair Color : </h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Skin Color : </h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Eye Color : </h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Birth Year : </h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Gender : </h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Created : </h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Edited : </h2>
            <h2 class="subtitle is-4 ml-6 mb-1 pd-0">Url : </h2>
          </div>
        </div>
      </div>
    </section>
  `,
  styles: [
  ]
})
export class ActorSingleComponent implements OnInit {
actor;
  constructor( private actorService: ActorService, private route: ActivatedRoute) { }

  ngOnInit(): void {

    this.route.params.subscribe(async params => {
      const actorname = params['actorname'];
      this.actor = await this.actorService.getActor(actorname)
      console.log(this.actor)
    });
  }
}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW