只显示可用的html元素

Question

所以我试图从csv表的内容填充传单JS地图的弹出窗口。弹出框中充满了html。它完全符合我的需要。我唯一的问题是，并不是每个弹出窗口都有一个可用的图像，但每个弹出窗口都依赖于相同的html代码，如下所示:

popUp = "<h2>"+feature.properties.Name+"</h2>" +
"<img src='"+ feature.properties.picturelink +"'width='300'</img>" +"<br>"+"<br>"+
"<h4>"+feature.properties.description+"<br>"

如果没有可用的图像，则显示占位符:占位符

是否有一种方法，只显示实际的图像和隐藏占位符，如果没有?

Answer 1

您可以将onerror添加到图像中以隐藏损坏的图像。

onerror="this.style.display='none'"

Answer 2

我建议:

// 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>`;

引用:

• 条件(三元)运算符。
• 模板文字。