时间戳

首页 > 解决方案 > 如果图像不存在，则更新 img src

javascript - 如果图像不存在，则更新 img src

问题描述

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

此代码将显示在多个页面中，因此如果第一个图像不存在，它将 src 显示为“未定义”或“未知”所以我需要指定这 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> ');
  }
});

标签： javascriptjqueryhtml

解决方案

你让这变得比它需要的更复杂。实现所需内容的最简单方法是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>

推荐阅读