Load Angular image

I'm passing a project made in Typescript to angular (it's a chess). The problem I have is that I do not know how I can load the images of the chips.

Code that I have to load the cards;

colocarFichas(casilla) : void{
let img = document.createElement("img");
let nombre: string;
    if(casilla.id=="0" || casilla.id=="7"){
      img = document.createElement("img");
      img.setAttribute("src","./torreBlanca.png");
      casilla.appendChild(img);
    nombre="torreBlanco";
    }
    if(casilla.id>=8 && casilla.id<=15){
        img = document.createElement("img");
        img.setAttribute("src","./peonBlanco.png");
        casilla.appendChild(img);
        nombre="peonBlanco";
    }
    if(casilla.id=="1" || casilla.id=="6"){
        img = document.createElement("img");
        img.setAttribute("src","./caballoBlanco.png");
        casilla.appendChild(img);
        nombre="caballoBlanco";
    }

And so with all, the casilla element is generated dynamically by code typescript ;

  let tablero = document.getElementById("tablero");
  let nCasillas = 8*8;
for(let i = 0; i<nCasillas; i++){

  if(i%8 ==0){
      var fila = document.createElement("div");
      fila.className="fila";
      this.cambioColor=!this.cambioColor;
  }
  let casilla = document.createElement("div");
  //Evento del click
   casilla.onclick= new function(){
      let idCasillaClicada=casilla.id;

  }
  //Fin evento click
  casilla.id =i.toString();
  casilla.className="casilla";
  fila.appendChild(casilla);
  tablero.appendChild(fila);

  if(this.cambioColor){
  casilla.style.background= "#233472";
  this.cambioColor=false;
  }else{
    this.cambioColor=true;
   }

  this.colocarFichas(casilla);
}//Fin del For
}// Fin del metodo pintar tablero.

The images are housed in the same directory as the module, so ./nombre I think should work.

Another thing that I think I do not do well is the assignment of the event click on the box casilla.onclick= new function(){

This is the current result that the browser shows me;