我有2个可能的图像显示。如果第一个存在，则显示它；如果没有，请显示第二个
该代码将显示在多个页面中，因此，如果第一个图像不存在，它将显示src为“ undefined”或“ unknown”，因此我需要指定这2个实例
我正在尝试以下操作，但是一旦添加“或未知”，它就会中断：
<div id="section-heading">
<div id="topBannerG" class="groupImageHidden">
<img src="(unknnown)">
</div>
<div id="topBannerG" class="groupImageHidden">
<img id="ctl00_ctl26_imgBanner" src="image.jpg">
</div>
</div>
$(document).ready(function() {
var imageDef = $("#topBannerG.groupImageHidden img");
if (typeof imageDef == "undefined") || (typeof imageDef === "unknown") {
var imgHref = $('.groupImage img').attr("src");
$('#section-heading').prepend('<div id="topBannerG" class="mslwidget maxWidth groupImage"><img src="' + imgHref + '" style="border-width:0px;"></div> ');
} else {
var imgTopHref = $('#topBannerG img').attr("src");
$('#section-heading').prepend('<div id="topBannerG" class="mslwidget maxWidth msl-pagebanner"><img id="ctl00_ctl26_imgBanner" src="' + imgTopHref + '" style="border-width:0px;"></div> ');
}
});
您已经使它变得比所需复杂。实现所需功能的最简单方法是img使用原始srcURL将DOM添加到DOM 。然后error在JS中添加一个处理程序，如果图像无法加载，则调用该处理程序。此时，您可以将其更新为src您知道有效的图像。像这样：
$('#topBannerG img').on('error', function() {
this.src = 'https://i.imgur.com/CbsGGVp.jpg';
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section-heading">
<div id="topBannerG" class="groupImageHidden">
<img src="invalid.jpg" />
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句