Question

我有2张可能的图像要显示。如果第一个存在，则显示它；如果没有，请显示第二个

此代码将显示在多个页面中，因此，如果第一个图像不存在，它将在src中显示为“ undefined”或“ unknown” 所以我需要指定这两个实例

我正在尝试以下操作，但是一旦添加“或未知”，它就会中断：

<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> ');
  }
});

Answer 1

您已经使它变得比所需的复杂。实现所需条件的最简单方法是使用原始img URL将src添加到DOM中。然后在JS中添加error处理程序，如果图像加载失败，则调用该处理程序。此时，您可以将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>

Answer 2

我已经用相同的逻辑修复了您的代码，希望对您有所帮助！

$(document).ready(function() {
  //var imageDef = $("#topBannerG.groupImageHidden img");
  var imageDef1 = document.querySelectorAll("#topBannerG.groupImageHidden img")
  //console.log("imageDef--",imageDef1)
  imageDef1.forEach(function(imageDef) {
    console.log("imageDef-", imageDef.src)
    if (imageDef.src == "" || imageDef.src == '') {
      var imgHref = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRpFBWqwBWz1PssMHzubdkMu9dMhzd1HCScBqc0ReHNeCDvtYStWA';
      $('#section-heading').prepend('<div id="topBannerG" class="mslwidget maxWidth groupImage"><img src="' + imgHref + '" style="border-width:0px;"></div> ');
    } else {
      var imgTopHref = imageDef.src;
      $('#section-heading').prepend('<div id="topBannerG" class="mslwidget maxWidth msl-pagebanner"><img id="ctl00_ctl26_imgBanner" src="' + imgTopHref + '" style="border-width:0px;"></div> ');
    }
  })
});

<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(unkown)>
  </div>

  <div id="topBannerG" class="groupImageHidden">
    <img id="ctl00_ctl26_imgBanner" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png">
  </div>

</div>

如果图像不存在，请更新img src

2 个答案: