Problems with broken image icon-CodePudding

I have a leaflet map running on a server whose popups are automatically filled with images. Some popups contain three images. The problem is that the broken image icon appears on those that contain fewer images. I've already tried to remove them with alt="", but it doesn't work.

Attached is a link to the app/code.

function forEachFeatureCC(feature, layer) {
  var popUp =
    "<h2>"   feature.properties.Name   "</h2>"  
    "<img src='"   feature.properties.Bildlink   "'width='300'</img>"  
    "<br>"   "<br>"  
    "<h4>"   feature.properties.Beschreibung  
    "<br>"   "<br>"   
    "<img src='"   feature.properties.Bildlink_2   "'width='300'</img>"  
    "<br>"   "<br>"  
    "<img src='"   feature.properties.Bildlink_3   "' width='300' alt=''</img>"  
    "<br>"   "<br>";
  layer.bindPopup(popUp).update();
}

https://wasserwiki.eu/Wasserwiki_App_Mobile

CodePudding user response：

OK, I see, you simply don't want to show the absent images. In that case you can do:

function getImageHtml(imagelink)
{
   return "<img src='"  imagelink   "' width='300'</img>"   "<br>"   "<br>";
}

function forEachFeatureCC(feature, layer) 
{
    var popUp = "<h2>"   feature.properties.Name   "</h2>";
    if (feature.properties.Bildlink) {
        popUp = popUp   getImageHtml(feature.properties.Bildlink);
    }
    if (feature.properties.Bildlink_2) {
        popUp = popUp   getImageHtml(feature.properties.Bildlink_2);
    }
    if (feature.properties.Bildlink_3) {
        popUp = popUp   getImageHtml(feature.properties.Bildlink_3);
    }
    layer.bindPopup(popUp).update();
}

I didn't test the code, so some debugging might be needed, but I think the general idea is clear?