如果图片不存在，则更新img src

Question

我有两个可能要展示的图片。如果第一个存在，就展示它；否则，展示第二个。

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

我尝试了以下代码，但一旦添加“or unknown”，它就会出错：

最初的回答：

<img src="image1.jpg" onError="this.src='image2.jpg'" alt="image">

请使用上面的代码替换原始代码。这将展示第一张图片，如果无法加载，则会显示第二张图片。

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

- Mika

---

如果你说的“不存在”是指“加载失败”，那么你需要添加一个事件监听器来确定它是否已加载：https://dev59.com/v2kw5IYBdhLWcg3wi7Jz - user5734311

你可以只用CSS来解决这个问题，顺便说一句：https://jsfiddle.net/khrismuc/wrn8jbof/ - user5734311

你可以使用ng-if来实现这个目的。 - undefined

Answer 1

你把它搞得比必要的复杂。实现你所需的最简单方法是使用原始src URL将img添加到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>

- Rory McCrossan

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>

- p u