Leaflet JS 地图弹窗如何仅在图片可用时显示对应HTML元素

你可以通过两种场景的处理实现需求，按需选择即可：

方案1：先判断图片字段是否存在有效值，动态拼接HTML #

如果CSV中无对应图片时，feature.properties.picturelink 会返回空字符串、null、undefined这类无效值，可以在拼接弹窗HTML前先做判断，只有值有效时才拼接img标签：

// 先初始化公共部分
let popUp = "<h2>"+ feature.properties.Name +"</h2>";
// 判断图片链接是否有效
const picLink = feature.properties.picturelink;
if (picLink && picLink.trim() !== "") {
  // 有有效链接时才拼接图片元素
  popUp += "<img src='"+ picLink +"' width='300'><br><br>";
}
// 拼接剩余部分
popUp += "<h4>"+ feature.properties.description +"<br>";

这个方案实现最简单，适合可以保证CSV里空图片对应字段就是空值的场景。

方案2：给img添加加载失败自动隐藏的逻辑 #

如果CSV里可能填了链接但链接本身失效（比如资源删除、404），可以给img标签加onerror事件，加载失败时自动隐藏该元素：

popUp = "<h2>"+ feature.properties.Name +"</h2>" +
        // 加onerror属性，加载失败时隐藏自身
        "<img src='"+ feature.properties.picturelink +"' width='300' onerror='this.style.display=\"none\"'><br><br>" +
        "<h4>"+ feature.properties.description +"<br>";

这个方案可以同时覆盖「字段为空」和「链接失效」两种场景，不需要提前判断字段值，适配性更强。

内容的提问来源于stack exchange，提问作者MrSalamikuchen