buenas noches. tengo el siguiente problemas resulta que estoy haciendo un juego de memoria utilizando JavaScript tengo un array de objetos los cuales tienen las propiedades nombre: 'nombre de la carta' e imagen: "ruta de la imagen". hasta aquí todo bien. el problema es que me estoy creando una función que se llama tablero donde quiero visualizar el tablero donde estarán las imágenes y obviamente las imágenes.
pero me aparece el erro Failed to load resource: net::ERR_FILE_NOT_FOUND y se ve en miniatura todas la imagenes adjunto mi codigo;
document.addEventListener("DOMContentLoaded",() => {
const cardArray = [
{
name: "itachi",
img : "imagenes/itachi.png"
},
{
name: "shisui",
img : "imagenes/shisui.png"
},
{
name: "susano",
img: "imagenes/susano.png"
}
]
const grid = document.querySelector('.grid');
function tablero() {
for(let i = 0; i < cardArray.length; i++) {
const carta = document.createElement('img');
carta.setAttribute("src","imagenes/blank.png")
carta.setAttribute("data-id", i)
//carta.addEventListener('click', flipCard)
grid.appendChild(carta)
}
}
tablero();
});
.grid {
display: flex;
flex-wrap: wrap;
width: 400px;
height: 300px;
background-color: blue;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Memory Game</title>
<link rel="stylesheet" href="style.css"></link>
<script src="app.js" charset="utf-8"></script>
</head>
<body>
<h3>Score:<span id="result"></span></h3>
<div class="grid">
</div>
</body>
</html>