Así que estoy tratando de llenar las ventanas emergentes de un mapa Leaflet JS con contenido de una tabla csv. La ventana emergente está llena de html. Se ajusta perfectamente a mis necesidades. El único problema que tengo es que no todas las ventanas emergentes tienen una imagen disponible, pero cada ventana emergente depende del mismo código html que se muestra a continuación:
popUp = "<h2>"+feature.properties.Name+"</h2>" + "<img src='"+ feature.properties.picturelink +"'width='300'</img>" +"<br>"+"<br>"+ "<h4>"+feature.properties.description+"<br>"Si no hay ninguna imagen disponible, se muestra un marcador de posición: marcador de posición
¿Hay alguna manera de mostrar solo imágenes reales y ocultar el marcador de posición si no hay ninguno?
Puede agregar onerror a la imagen para ocultarla si está rota.
onerror="this.style.display='none'"Yo sugeriría:
// here we're using a template literal which allows us to interpolate // JavaScript variables (wrapped in the ${...}) directly into the string // which avoids having to concatenate strings; this also allows new-lines // within the string itself: let popUp = `<h2>${feature.properties.Name}</h2> <img src="${feature.properties.picturelink}" width="300" // here we use a conditional/ternary operator, // if the feature.properties.picturelink property // is falsey then the style of the <img> is set // to display: none; otherwise - if the property // is truthy - it's set to display: auto: style="${ feature.properties.picturelink ? 'auto' : 'none' }"> <br><br> <h4>${feature.properties.description}</h4>`;Referencias: