Estoy construyendo una función de búsqueda en javascript.
Hice una matriz en un archivo separado con objetos.
Estoy tratando de mostrar 1 cosa del objeto que está dentro de la matriz.
Ya definí la ruta a la imagen, por lo que lo único que estoy almacenando en la matriz es el nombre. Pero todavía me muestra una imagen rota.
¿Alguien tiene una idea?
¡Gracias!
Código:
// the entire code: https://codepen.io/Yung_n-d/pen/mdwQGqX var data = [ //The list { workshop: '3D Animatie', age: '', wsType: 'beeldkunst', wsLink: 'workshopPages/beeldkunst/3danimatie.php', level: '', photo: 'Beeldkunst.png', }, { workshop: 'Cartoon Tekenen', age: '', wsType: 'beeldkunst', wsLink: 'workshopPages/beeldkunst/cartoontekenen.php', level: '', photo: 'Beeldkunst.png', }] var output = '<div class="list-group">'; $.each(data, function(key, val) { //If workshop matches search result, display if( ((val.workshop.search(caseExp) !== -1) || (val.wsType.search(caseExp) !== -1) ) && ( (val.age.search(ageValue) !== -1) && (val.wsType.search(typeValue) !== -1) && (val.level.search(levelValue) !== -1) ) ){ output += '<a href=' + val.wsLink + ' target="_blank" > <div class="list-group-item"><h4 class="list-group-item-heading">' + val.workshop + '</h4></a>'; output += '<p> Leeftijdsgroep: ' + val.age + '</p>' + '<p> Hoofdcategorie: ' + val.wsType + '</p>' + '<img src=\'media/fotos/gallery/\'' + val.photo + '></div>'; } }); output += '</div>'; $('#searchUpdate').html(output);Como dijo @CBroe en el comentario, fue un error tipográfico cuando creaste la URL de la imagen. Pero también tiene algunas discrepancias de etiquetas en el código.
En un caso como este, es mucho mejor usar la interpolación de cadenas para construir su HTML. Puedes hacerlo para todo el artículo de esta manera:
output += `<div class="list-group-item"> <a href="${val.wsLink} target="_blank"> <h4 class="list-group-item-heading">${val.workshop}</h4> </a> <p> Leeftijdsgroep: ${val.age}</p> <p> Hoofdcategorie: ${val.wsType}</p> <img src="media/fotos/gallery/${val.photo}"> </div>`;Esto hace que el código sea mucho más legible y ayudaría a evitar errores tipográficos como el que tenía.