tengo una tabla con 4 inputs mas un input tipo file, lo que quiero hacer es que al darle al botón me añada los datos... eso hace, los añade, pero al momento de elegir una imagen solo me pone la ruta donde esa img aparece, no me pone la imagen en si a lo mejor alguien sabe si estoy haciendo mal algo o que? capaz esta no es la forma y la estoy haciendo mal o no sé!!!
function cargarDatos(){
//obtener los datos que ingresó el usuario
let image = document.querySelector("#image").value;
let title = document.querySelector("#title").value;
let descripcion = document.querySelector("#descripcion").value;
let ubicacion = document.querySelector("#ubicacion").value;
let precio = document.querySelector("#precio").value;
//obtener el elemento tabla
let tabla = document.querySelector("#tabla");
//crear el contenido de la tabla
let cuerpoTabla = `
<tr>
<td>${image}</td>
<td>${title}</td>
<td>${descripcion}</td>
<td>${ubicacion}</td>
<td>${precio}</td>
<br>
</tr>`
;
tabla.innerHTML += cuerpoTabla;
}
function crearTabla(){
const tabla = document.createElement("table");
const tr = document.createElement("tr");
const cabezal = document.createElement("thead")
for(let i = 0; 1 < 4; i++){
const th = document.createElement("th");
switch (i){
case 0:
th.innerText = "image"
break;
case 1:
th.innerText = "title"
break;
case 2:
th.innerText = "descripcion"
break;
case 3:
th.innerText = "ubicacion"
break;
case 4:
th.innerText = "precio"
break;
default:
break;
}
thead.appendChild(th);
}
tr.appendChild(thead);
tabla.appendChild(tr);
document.body.appendChild(tabla);
}
crearTabla();
<form action="">
<label for="image"></label>
<input type="file" id="image" accept="image/*">
<br><br>
<label for="title">Título</label>
<input type="text" id="title">
<br>
<label for="descripcion">Descripción</label>
<input type="text"id="descripcion">
<br>
<label for="ubicacion">Ubicación</label>
<input type="text" id="ubicacion">
<br>
<label for="precio">Precio</label>
<input type="text" id="precio">
</form>
<br>
<button class="btn btn-primary" id="cargar" onclick="cargarDatos()">Añadir</button>
<br>
<br>
<table>
<tr>
<thead>
<th>Imagen</th>
<th>Título</th>
<th>Descripción</th>
<th>Ubicación</th>
<th>Precio</th>
</thead>
</tr>
<tbody id="tabla">
</tbody>
</table>