1

Estoy pasando un proyecto realizado en Typescript a angular (es un ajedrez). El problema que tengo es que no se como puedo cargar las imágenes de las fichas.

Código que tengo para cargar las fichas;

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

Y así con todas, el elemento casilla es generado dinamicamente mediante código 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.

Las imágenes están alojadas en el mismo directorio que el módulo por lo que ./nombrecreo que tendría que funcionar.

Otra cosa que creo que no hago bien es la asignacion del evento clicksobre la casilla casilla.onclick= new function(){

Este es el resultado actual que me muestra el navegador; introducir la descripción de la imagen aquí

1 respuesta 1

3

Cuando trabajas con Angular, lo mejor que puedes hacer es seguir sus reglas o todo se vuelve más complejo: puesto que todo se redirecciona a partir de la URL establecida como base (mira la etiqueta HTML <base> que seguro que tienes en tu index.html), tienes que pensar en esa URL cuando buscas una imagen, por lo que te recomiendo que muevas todas las imágenes a la carpeta assets de tu proyecto y uses algo como:

<img class="logo" src="assets/img/mi-imagen.png ">

Si las imágenes no las pones ahí, piensa que Angular se compila cuando quieres pasar a producción, creando un único archivo .js con todos los componentes y sus plantillas, con lo que no sé cómo trataría el compilador las imágenes que se encontrasen en las carpetas de esos compomentes.

Por otro lado, tampoco deberías necesitar usar document.createElement... en tu componente, las plantillas (las vistas) te permiten definir todo el HTML a mostrar de un modo limpio, dejando el código del componente Typescript para definir el modelo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.